UseQuery not triggering a rerender

const MyComponent = () => {
  const { data, isLoading, error, isFetching } = useQueryHook();

  console.log({data, isLoading, error, isFetching})

  if (isLoading) return <Loader />;
  if (error) return <Error error={error}/>;
  
  return <Data data={data} />;
}

{"data": undefined, "error": null, "isFetching": true, "isLoading": true}

{"data": [.....], "error": null, "isFetching": false, "isLoading": false}

function useQueryHook(userId: string) {
  const queryKey = ["foo", userId];

  const queryFn = async () => {
    const { data, error } = await supabase
      .from("foo")
      .select(`level, user_id`)
      .eq("user_id", userId);
    if (error) throw error;
    return data;
  };

  return useQuery({ queryKey, queryFn });
}