isRefetching sets to true with prefetchInfiniteQuery

[BipinNinjaTech]

I've functionality of showing skeleton loader on load. And loading ring on top when fetch newest data. I've used isPending state for skeleton loader and isRefetching state to show newest data fetching loading ring.

I'm using next js.

But after I did optimisation done for SSR by adding prefetchInfiniteQuery in page.tsx I faced below issue.

Actual behaviour:
So when I refresh the page I got isPending to true. Then immediately after isPending false, isRefetching gets true. So I'm seeing both loader one by one on initial page load. So may be it's because of the immediate refetch is done

Expected behaviour:
On Initial load only skeleton loading should show. And when I fetch new data on click of button should show loading ring on top.

Below is my code

ReactQueryProvider

export function ReactQueryProvider({ children }: { children: ReactNode }) {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        // With SSR, we usually want to set some default staleTime
        // above 0 to avoid refetching immediately on the client
        staleTime: 60 * 1000,
      },
    },
  });

  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}

Page.tsx

const queryClient = new QueryClient();

  const drafts = queryClient.prefetchInfiniteQuery({
    queryKey: queryKey,
    queryFn: queryFn,
    getNextPageParam: getNextPageParam,
    initialPageParam: 0,
  });

  await Promise.all([drafts]);

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <MyComponent isLoading={false} />
    </HydrationBoundary>
  );

Component.tsx

const {
   data,
   isRefetching,
   isPending,
   isFetching,
 } =  useInfiniteQuery({
   queryKey,
   queryFn,
   initialPageParam: 0,
   getNextPageParam: getNextPageParam,
   refetchOnWindowFocus: false,
 });

How to avoid initial refetch on load ? Anyone have an solution please help. Thanks in advanced.