So I have a state of dynamically loaded options(API call):

// myOptions will be loaded with data after API call returned
// and will re-render the component using `useEffect`
const [myOptions, setMyOptions] = useState()

I'm loading react-select like so and everything works fine, except the defaultValue:

<AsyncCreatableSelect
  defaultValue={myOptions?.[0]}
  defaultOptions={myOptions}
  onChange={selectHandler}
  isMulti
  isSearchable
/>

The myOptions?.[0] is just an example. I want it to be passed with props, but the point here is that it simply doesn't work this way. It will work however if I'll pass the object right away when the component is loaded at the first time, like so:

<AsyncCreatableSelect
  defaultValue={
    {
      _id: "myLongId",
      value: "Some Value",
      label: "someLabel",
    },
  }
  defaultOptions={myOptions}
  onChange={selectHandler}
  isMulti
  isSearchable
/>

But obviously I don't want to hardcore it, but use it dynamically with returned data from the API call and passed props.

Also, the myOptions?.[0](when fulfilled) and the object ({_id: "myLongId", value: "Some Value",label: "someLabel",}) are exactly the same, meaning they're === to true. So the only reason for it not to work is some kind of memoization at the end of react-select. This is crazy... it should be triggered on the prop change.

I'm sure I'm not the only one dealing with this, can you share your solution to this please?

Thanks.