I'm using react-select to get search names from backend service.Therefore I need to add debounce for my search field and API need to call after minimum character length (3) entered in the text field.

I tried as bellow.but its won't showing the results in dropdown.

 <AsyncSelect
        defaultOptions
        isClearable={true}
        className="form-control"
        id="search"
        loadOptions={(data) => {
            data.length >= 3 && loadOptions();
            }}
        onChange={handleChange}
    />
    
     const loadOptions = _.debounce((data, callback) => {
        fetchData(data).then((options) => {
          callback(options);
        });
      }, DEBOUNCE_TIME);

      
  const fetchData = async (data) => {
     if (data) {
       const nameList = await request(METHOD.GET, `${API_URL.GET_BY_NAME}/${data}`);
        if (nameList.data) {
            return nameList.data.map((v) => ({ value: v.name, label: v.name }));
        }
     }
  };