MultiSelect component: unable to render selected values on t

HI,

I have a problem i would appreciate your help with this:

In this.state.valueofCountry.temp i am maintaining the options:

    <MDBSelect
         selectAll
         search
         multiple
         color="primary"
         options={this.state.valueofCountry.temp}
         getTextContent={this.getValueOfSelectCountry}
         selected={this.state.valueofCountry.value}
         label="Country"
      />
this.state.valueofCountry.temp=allCountries: [

  {
    text: "Germany",
    value: "2",
    checked: true,
  },
  {
    text: "France",
    value: "3",
    checked: true,
  },
  {
    text: "Poland",
    value: "4",
    checked: true,
  },
  {
    text: "USA",
    value: "1",
    checked: true,
  },
  {
    text: "Japan",
    value: "5",
    checked: true,
  }
],

    getValueOfSelectCountry = value => { 
    let countrySelectionOptions = this.state.valueofCountry.temp;     
    countrySelectionOptions.forEach(function (country) { 
    var r = /country.text/ if 
         (r.test(value)) { country.checked = true } });

    let found_any = find(countrySelectionOptions, { checked: true });
    if (!found_any) {
        value = ''
    }
    this.setState({ ...this.state, valueofCountry: { value: value, temp: countrySelectionOptions } }, function () {
        console.log(this.state);
    });
};

The problem is the selected value doesnt show properly in the select box, here is a screen grab please advice