I am trying to make an production build for next js 14.2
i am using @tanstack/react-query

'use client';
import { getCastsTrending, getCurrentUserProfile, getFeedTopics, getWalletDetail } from "@/services/api";
import { QueryClient, useQuery } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export async function generateStaticParams() {
  const queryClient = new QueryClient()
  await queryClient.prefetchQuery('walletDetail', getWalletDetail)
  await queryClient.prefetchQuery('userProfile', getCurrentUserProfile)
  await queryClient.prefetchQuery('feedTopics', getFeedTopics)
  await queryClient.prefetchQuery('castsTrending', getCastsTrending)
  return {
    dehydratedState: JSON.parse(JSON.stringify(queryClient.getState()))
  }

}


const Hero = () => {
  const router = useRouter()

  const { data: walletData, isLoading: walletLoading } = useQuery({
    queryKey: ['walletDetail'],
    queryFn: getWalletDetail,

  });

  const { data: profileData, isLoading: profileLoading } = useQuery({
    queryKey: ['userProfile'],
    queryFn: getCurrentUserProfile,
    // staleTime: 1000 * 60 * 5 // 5 minutes
  });

  const { data: topicsData, isLoading: topicsLoading } = useQuery({
    queryKey: ['feedTopics'],
    queryFn: getFeedTopics,
  })
  const { data: trendingData = [], isLoading: trendingLoading, refetch: refetchTrending } = useQuery({
    queryKey: ['castsTrending'],
    queryFn: getCastsTrending,
  });


  return (
    <div className="flex-1 overflow-y-auto max-h-dvh">
      Heyyy
    </div >
  );
};

export default Hero;