There are no default options, but when i start typing ,then options are shown

Disclaimer

I am dynamicallly generating multiple DynamcMultiSelect components using map function on a array which I am fetching from API.
Bascically I have a ADD button which creates a modal which has a dropdown, when a user select a value from it I am fetching an array from the backend, which will be used to make multiple DynamicMultiSelectComponents which use react-select. But when I click on any of the i am getting no Options, but when I type something I am getting all the values,

DynamicMultiSelect Component
`

import { useState } from "react";
import AsyncSelect from "react-select/async";
import { toast } from "react-toastify";
import ToastMsg from "../UI/ToastMsg";

const DynamicMultiSelect = ({ fieldNames, selectedDataModel, fieldName }) => {
const [options, setOptions] = useState({});

const handleChange = (selectedOption)=>{
     console.log('HandleChange',selectedOption)
}
const loadOptions = async (searchValue, callback) => {
try {
  const response = await fetch(
    process.env.NEXT_PUBLIC_API_DOMAIN + "/nautobot/charts/filterValues",
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        dataModel: selectedDataModel,
        filterKey: fieldName,
        
      }),
    }
  );
  const data = await response.json();
  console.log('Firldname', fieldName, '==========',data.values)
  const loadedOptions  = data?.values?.map((option) => ({
    label: option.toString(),
    value: option.toString(),
  }));
  
  const filteredOptions = loadedOptions.filter((option)=>option.label.toLowerCase().includes(searchValue.toLowerCase()));
//   console.log(loadedOptions)
  callback(loadedOptions)
  setOptions(loadedOptions );
} catch (error) {
  console.error("Error fetching data:", error);
  const errorToast = () => {
    toast.error(<ToastMsg message={error} />, {
      hideProgressBar: true,
      progress: undefined,
    });
  };
  errorToast();
}
};
return (
 <div>
   <label>
    {/* {console.log('Options',options)} */}
    {fieldName}
    <AsyncSelect
      loadOptions={loadOptions}
      defaultOptions
      isMulti
      onChange={handleChange}
      //   defaultOptions={options}
    //   cacheOptions
      placeholder={`Select ${fieldName}`}
    />
  </label>
 </div>
);
};

export default DynamicMultiSelect;`

Creating this component

{nonNumberedFields.map((fieldName)=> ( <DynamicMultiSelect key={fieldName} fieldName={fieldName} fieldNames={nonNumberedFields} selectedDataModel={selectedDataModel} /> )) }

Images
Scene 1

Scene 2

Scene 3

Scene 4

Start with the DynamicMultiSelect component and its react-select/async AsyncSelect usage, especially loadOptions and defaultOptions. Reproduce the case where options appear only after typing, then verify that the fetched values are shown when the menu opens without input.