default value not shown after options awaited

[erik-metz]

I get my options from an api call and after the options are received I set isLoading to false and the options to the received options. But then my defaultValue is not shown. Here is a CodeSandbox
in this sandbox I created 3 select the third one is not showing the defaultValue after clicking the "turn loading off" button.
thanks for your support

[erik-metz]

here is also the whole code

import "./styles.css";

import { useState } from 'react'
import Select from 'react-select'


export default function App() {
  const dataFromApi = [
		{ value: 'abc', label: 'abc' },
		{ value: 'def', label: 'def' },
		{ value: 'ghi', label: 'ghi' },
	]

	const [options, setOptions] = useState([])
	const [defaultValue, setDefaultValue] = useState(null)
	const [isLoading, setIsLoading] = useState(true)

	return (
		<>
			<button
				onClick={() => {
					if (isLoading) {
						setTimeout(() => {
							setOptions(dataFromApi)
							setDefaultValue(dataFromApi[0] ?? null)
							setIsLoading((prev) => !prev)
						}, 2000)
					} else {
						setOptions([])
						setDefaultValue(null)
						setIsLoading((prev) => !prev)
					}
				}}>
				{isLoading ? 'turn loading off' : 'turn loading on'}
			</button>
			{/* this defaultValue is shown correctly */}
			<Select options={dataFromApi} defaultValue={dataFromApi[0] ?? null} />
			{/* this defaultValue is shown correctly */}
			<Select options={dataFromApi} defaultValue={dataFromApi[0] ?? null} isLoading={isLoading} />
			{/* this defaultValue is not shown correctly */}
			<Select options={options} defaultValue={defaultValue} isLoading={isLoading} />
		</>
	)
}