Javascript – Can't use custom hooks inside 'queryFn' which is a property of 'useQuery' (tanstack query)

I here want to fetch all ‘products’ using react query BUT

1. ‘build process’ fails when using custom hooks inside ‘useQuery’, so it throws error in ‘build process’ but it works perfectly fine during ‘development server’

const { data, isPending, isError, error } = useQuery({ queryKey: ["products"], queryFn: ({ signal }) => useHttp({ signal }), });
(Using signal to abort http request if user navigates to other page when request is being made)

Error message shown is the below one:
Error: React Hook "useHttp" is called in function "queryFn" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

Once again it works during development server but I’m not able to ‘build’ it due to the above error

useHttp looks like
`

export async function useHttp({ id, signal }) {
  try {
    const url = "https://fakestoreapi.com/products";

    const response = await fetch(url, { signal });

    if (!response.ok) {
      throw new Error("Something went wrong");
    }

    const data = await response.json();

    return data;
  } catch (error) {
    console.log(error);
  }
}

`