Why initial value of dropdown not set in react?

Could you please tell me why my initial value is not set in react ?I am using react-final-form

Here is my code

https://codesandbox.io/s/frosty-star-1qcw3

My initial value is printed in console but not set on dropdown

API link of react final form

https://final-form.org/docs/react-final-form/examples

const [options, setOptions] = useState([]);
  useEffect(() => {
    console.log("urllll");

    // (async () => {
    //   setOptions(await getDropDowOptions(dataKey));
    // })();
    console.log(options);
    console.log(value);
    (() => {
      setOptions(getDropDowOptions(dataKey));
    })();
  }, []);





const getDropDowOptions = dataKey => {
  console.log(dataKey);
  switch (dataKey) {
    case "abc":
      console.log("========");
      const slots = [
        {
          key: "9-13",
          label: "09:00-13:00",
          value: "09:00-13:00"
        },
        {
          key: "13:00-16:00",
          label: "13:00-16:00",
          value: "13:00-16:00"
        },
        {
          key: "16:00-19:00",
          label: "16:00-19:00",
          value: "5000"
        }
      ];
      return slots;
  }
};

It seems you are initializing your state to be an empty array, which yields an empty array to be filtered/found when setting the defaultValue in AutoComplete. Moving the option populating directly into the initial value of state does the trick for me in your sandbox.

const [options, setOptions] = useState(getDropDowOptions(dataKey));

My guess is the effect is triggered on first render and sets some state, but that state is not available until the next render cycle, i.e. the second render. By then the select has already set it's default value (from during the first render when it was mounted).