React Select - Default Value from Redux not working

Question

I've data coming from Redux in this format:

[
0: {value: '1.5', label: 'Extra cheese'}
1: {value: '3', label: 'Tomato'}
]

and i try to load them into my react-select. But it fails, bcs it loads instantly the initialToppings as defaultValue (So it shows me empty Strings as defaultValue). And this Value can never be changed again. But without initialToppings i get nothing at defaultValue bcs redux is to slow and the defaultValue is empty so i can't load it in again later...

const initialToppings = [{ label: '', value: '' }];

const [defaultToppings, setDefaultToppings] = useState(initialToppings);

  useEffect(() => {
    setDefaultToppings(
      editProduct?.selectedToppings?.map((topping, value) => ({
        ...topping,
        value,
      })) ?? initialToppings
    );
  }, [editProduct]);

<Select
 options={extraOptions}
 formatOptionLabel={formatExtras}
 isMulti
 defaultValue={defaultToppings}
 // defaultValue={[
 //   { label: 'Test 1', value: '1' },
 //   { label: 'Test 2', value: '2' },
 // ]}
 onChange={setSelectedToppings}
/>

Answer 1

You can add key props to Select to force remounting component and make it re-render

<Select
    key={defaultToppings}
    options={extraOptions}
    formatOptionLabel={formatExtras}
    isMulti
    defaultValue={defaultToppings}
    // defaultValue={[
    //   { label: 'Test 1', value: '1' },
    //   { label: 'Test 2', value: '2' },
    // ]}
    onChange={setSelectedToppings}
/>

I've a simple codesandbox, you can check it