Presist Query Client Hydration error Nextjs 15 and React Query

[Tenuka22]

I've read the tanstack query docs but I wasn't able to find an answer. How to fix this. When Inital load the data loads but then It changes to a loading state

"use client";
import { QueryClient } from "@tanstack/react-query";
import type { ReactNode } from "react";
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
import { get, set, del } from "idb-keyval";
import type {
   PersistedClient,
   Persister,
} from "@tanstack/react-query-persist-client";

const queryClient = new QueryClient({
   defaultOptions: {
   	queries: {
   		gcTime: 1000 * 60 * 10,
   	},
   },
});

export function createIDBPersister(idbValidKey: IDBValidKey) {
   return {
   	persistClient: async (client: PersistedClient) => {
   		await set(idbValidKey, client);
   	},
   	restoreClient: async () => {
   		return await get<PersistedClient>(idbValidKey);
   	},
   	removeClient: async () => {
   		await del(idbValidKey);
   	},
   } as Persister;
}

const persister = createIDBPersister("droole-edu");

const QueryWrapper = ({ children }: { children: ReactNode }) => {
   return (
   	<PersistQueryClientProvider
   		persistOptions={{
   			persister,
   			dehydrateOptions: {
   				shouldDehydrateQuery: (query) =>
   					query.state.status === "success" && !!query.meta?.persist,
   			},
   		}}
   		client={queryClient}
   	>
   		{children}
   	</PersistQueryClientProvider>
   );
};

export default QueryWrapper;

Query Wrapper Component for wrap the

"use client";
import { getAllGroups } from "@/actions/group-actions.client";
import { useQuery } from "@tanstack/react-query";

export const useGetUserGroups = () =>
	useQuery({
		queryFn: getAllGroups,
		queryKey: ["createUserGroup"],
		enabled: true,
	});

Query Function ( a custom hook )

[TkDodo]

if you want someone to look into why something doesn’t work for you, please provide a minimal stackblitz or codesandbox reproduction