Use Debounce for search stuck in loading useQuery

[irsyaadbp]

i implement use debounce with useQuery is stuck in loading, but if i change to state its working
i already try if just call the function getSalesList use debounce and without useQuery its working too.
its just happen when i use useQuery, is there something wrong in my code?

hooks for useDebounce

import { useEffect, useState } from "react";

export default function useDebounce(value, delay) {
  // State and setters for debounced value
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(
    () => {
      // Update debounced value after delay
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);
      // Cancel the timeout if value changes (also on delay change or unmount)
      // This is how we prevent debounced value from updating if value is changed ...
      // .. within the delay period. Timeout gets cleared and restarted.
      return () => {
        clearTimeout(handler);
      };
    },
    [value, delay] // Only re-call effect if value or delay changes
  );
  return debouncedValue;
}

custom hooks for useQuery

export function useSales({
  name = "sales-list",
  params = {},
  options = {},
} = {}) {
  const { data, isLoading, isError, error, refetch } = useQuery(
    [name, { ...params }],
    ({ queryKey }) => getSalesList({ params: queryKey[1] }),
    {
      ...options,
      onSuccess: (dataQuery) => {
        if (options?.onSuccess) {
          return options?.onSuccess(dataQuery);
        }
      },
      onError: (err) => {
        if (err.message.toLowerCase().includes("expired")) {
          return Alert.alert(
            "Warning",
            "Your sesion is expired, please relogin",
            [{ text: "OK", onPress: logout }]
          );
        }
        if (options?.onError) {
          return options.onError(err);
        }

        const errorMessage = error?.response?.status
          ? error?.response?.data?.message ||
            "Something wrong, please try again later"
          : error?.message;
        Alert.alert("Warning", errorMessage);
      },
    }
  );

  return { data, isLoading, isError, error, refetch };
}

and this is my code for implement debounce for search

  const [search, setSearch] = useState("");
  const debounceSearch = useDebounce(search, 500);

  const { data, isLoading, isError, error, refetch } = useSales({
    params: {
      keyword: debounceSearch,
    },
  });

[TkDodo]

I'm using the same pattern successfully and I don't immediately see anything wrong here. Can you please put your code in a codesandbox to show a reproducible issue please