Expected behavior

It should be possible to create a controlled select

Actual behavior

Controlled select does not work. You can set the initial value, but you cannot control the value from outside the select.

Resources (screenshots, code snippets etc.)

import React, { useState } from 'react';
import {
  MDBSelect,
  MDBSelectInput,
  MDBSelectOptions,
  MDBSelectOption,
  MDBContainer,
  MDBBtn,
} from 'mdbreact';

const LodePage = () => {
  const [ length, setLength ] = useState('12')

  const options = [12, 24, 36].map(value => ({
    text: `${value} months`,
    value: value.toString(),
  }))

  return (
    <MDBContainer>
      <h1>Lode's Test page</h1>
      <br/>
      <span>selected: {length}</span>
      <br />
      <MDBBtn onClick={() => setLength('12')}>Reset length to 12</MDBBtn>
      <br/>
      <MDBSelect label='Example label' getValue={(value) => setLength(value)}>
        <MDBSelectInput selected='Choose your option'/>
        <MDBSelectOptions>
          {options.map(option => <MDBSelectOption selected={length == option.value} key={option.value} value={option.value}>{option.text}</MDBSelectOption>)}
        </MDBSelectOptions>
      </MDBSelect>
      <br />

    </MDBContainer>
  )
}

export default LodePage;