Hello, I have this react-select AsyncCreatableSelect that uses React Query v5.
The problem I am having is that the search results rendered in the UI (availableGenres) are lagging behind by 1 keystroke.

export const useAvailableGenres = inputValue => {
    return useQuery({
        queryKey: ['availableGenres', inputValue],
        queryFn: async () => {
            if (inputValue) {
                return await searchGenres(inputValue)
            } else {
                return await fetchGenres()
            }
        },
        enabled: inputValue.length > 0,
        staleTime: 0,
        cacheTime: 0,
    })
}

and the parts of my component using it:

const {
    data: availableGenres = [],
    refetch,
} = useAvailableGenres(inputValue)

useEffect(() => {
    if (inputValue) {
        refetch()
    }
}, [inputValue, refetch])

const loadOptions = async (inputValue, callback) => {
    try {
        callback(
            availableGenres.filter(
                genre =>
                    !selectedGenres.some(
                        selected => selected.id === genre.id,
                    ),
            ),
        )
    } catch (error) {
        console.error('Error loading options:', error)
        callback([])
    }
}

return (
  <CustomStyledSelect
      loadOptions={loadOptions}
      inputValue={inputValue}
      inputMode="search"
      onInputChange={handleInputChange}
      onKeyDown={handleKeyDown}
      onChange={handleSelectChange}
      onCreateOption={handleCreateNewGenre}
      defaultOptions={defaultGenres}
      placeholder="Looking for a different genre?"
      isClearable
      isSearchable
      isMulti
      isLoading={isLoading}
      formatCreateLabel={inputValue => `Create "${inputValue}"`}
      noOptionsMessage={() => 'Start typing to find a genre.'}
      createOptionPosition="first"
      instanceId="custom-genre-select"
      value={selectedGenres}
  />
)

Thanks for your time, any help is appreciated!