Hey guys, I am using prefetchQuery in my Next.js app, but for some reason, instead of the data being instantly accessbile on the client, it actually returns undefined and then the data. I though that was the idea of prefetchQuery...

component:

    const queryClient = getQueryClient();
    const dehydratedState = dehydrate(queryClient);

    await Promise.all([
        queryClient.prefetchQuery({
            queryKey: [QUERY_KEYS.BALANCE],
            queryFn: getBalance,
        }),
        queryClient.prefetchQuery({
            queryKey: [QUERY_KEYS.USER],
            queryFn: getPlayerInfo,
        }),
    ]);

return (
     <HydrationBoundary state={dehydratedState}>
            <header className="w-full relative bg-pink-400 z-[1] flex justify-center items-center" id="lb-header">
                <Child />
            </header>
        </HydrationBoundary>

in the child it is just a normal query:

    const {data: balance} = useQuery({
        queryKey: [QUERY_KEYS.BALANCE],
        queryFn: getBalance,
    });

    const {data: playerInfo} = useQuery({
        queryKey: [QUERY_KEYS.USER],
        queryFn: getPlayerInfo,
    });