Error: No QueryClient set in Next.js App Router despite following Advanced SSR guide.

// apps/template-1/app/providers.tsx
"use client";
let browserQueryClient: QueryClient | undefined; // Singleton pattern

function getQueryClient() {
  if (isServer) return new QueryClient();
  if (!browserQueryClient) browserQueryClient = new QueryClient();
  return browserQueryClient;
}

export default function Providers({ children }) {
  const queryClient = getQueryClient(); // <-- Potential issue
  return (
    <QueryClientProvider client={queryClient}>
      <ApiProvider http={http}>{children}</ApiProvider>
    </QueryClientProvider>
  );
}

'use client'
export const SearchFilters = () => {
  const { locationsQueries } = useApiQueries(); // Custom context
  const { data: cities } = locationsQueries.getCities.useQuery(); // Error here
};