I'm developing mostly with React class components. The complete source code of my component is below:

class ProvinceComponent extends Component {
    constructor(props) {
        super(props);

         this.state = {  
             provinces: []
         };

         this.fetchProvinces = this.fetchProvinces.bind(this);
    }

    componentDidMount() {
         this.fetchProvinces();
    }

    async fetchProvinces() {
        try {
            let response = await Province.fetchAll();
            let provinces = []; // new array is prepared here
            response.data.forEach(item => {
                let strId = item.id + '';
                let option = { 
                               value: strId,
                               text: item.province_name
                            };
                provinces.push(option);
            });
            this.setState( { provinces: provinces } );  // state is updated here 
        } catch(error) {
            // some error handling stuff goes here
            //...
        }
    }

    render() {
        return (
        <>
            <MDBSelect
                  id='province_id'
                  label='İl'
                  data={this.state.provinces}
             />
             <p>Option texts fetched from state are below (for debugging purposes):</p>
             {this.state.provinces.map((option, index) => {
                   return (<div key={index}>{option.text}</div>);
             })}
        </>
       );
    }

}

I fetch the data from API asynchronously and update the state to provide updated data for MDBSelect. The above component source code successfully fetches the data from API server, prepares each MDBSelect option in the way exactly the same as documented one {text: 'display label', value: 'value'} and pushes each option into an array local variable named provinces. When the iteration and population is finished, it updates the state of the component with this.setState({ provinces: provinces });

It is clear in the above source code that provided data attribute of MDBSelect component is this.state.provinces. This causes my class component to be re-rendered when state is changed. I also put down an inline array map function which proves that the data in this.state.provinces is an array, and it is re-rendered by my class component upon state updates. Unfortunately, MDBSelect component does not refresh its options upon state update. Please have a look at the screenshot below. My debugging loop of option.text worked and shown the data comming from API server, but MDBSelect didn't show.

Also, an error message is fired in the console while trying to open the select box complaining that the data is empty.

mdb-react-ui-kit.esm.js:1 Uncaught TypeError: Reduce of empty array with no initial value
at Array.reduce (<anonymous>)
at mdb-react-ui-kit.esm.js:1:1

Actually, I'm trying to refactor my source code to migrate from MDB4-REACT-UI-KIT-PRO-ESSENTIAL-5.2.0 to MDB5-REACT-UI-KIT-PRO-ESSENTIAL-2.3.0. My class component's MDBSelect was working without any error while using MDB4, but now it is not working. I completely believe that this is a bug of MDBSelect component.

Note: If I provide the data initially in state, then it is shown by MDBSelect and never changes with state updates. So, I think that MDBSelect component has a bug and does not update with state updates, it shows only initially hard coded values.

Would you please help me with a solution for that weird situation?