'why is react select default value not working

I am trying to use react select and trying to set a defaultValue but when I set a default value it does not appear on my dropdown. I have tried everything and then came here for help. any help would be appreciated. below attached is the code :

<Select
  classNamePrefix="react-select"
  options={
    countryDetails
      ? countryDetails.map((c) => ({
          label: c.label.split("-")[0],
          value: c.value
        }))
      : [{ label: "", value: "" }]
  }
  name="operatingCountry"
  placeholder={t("Select Country")}
  components={{ ValueContainer: CustomValueContainer }}
  defaultValue={
    (console.log(
      "country boy",
      countryDetails.find((c) => c.value == defaultCountryUser)
    ),
    countryDetails.find((c) => c.value == defaultCountryUser))
  }
  value={this.props.basicInfo["operatingCountry"].value}
  onChange={({ label, value }) => {
    this.props.selectChanged(
      "operatingCountry",
      { label, value },
      sectionKey
    );
  }}
/>

the console in the defaultValue gives result in console. as an object {label:"two",value:2}



Solution 1:[1]

The value should be an object. Try changing value to this:

value={this.props.basicInfo["operatingCountry"]}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Madhan S