Passing QueryClient but still getting `No QueryClient set, use QueryClientProvider to set one

export default function MainLayout({ children }: { children: React.ReactNode }) {
  const { state, send } = useAuth();

  useEffect(() => {
    console.log(state.context);
    console.log(send);
  }, [state]);

  console.log(children);

  return (
    <>
      <div className=" absolute inset-0 bg-[url(/grid.svg)] dark:bg-black dark:bg-[url(/whitegrid.svg)]">
        <HelmetProvider context={helmetContext}>
          <NextUIProvider>
            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
              <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
            </ThemeProvider>
          </NextUIProvider>
        </HelmetProvider>
      </div>
    </>
  );
}

export default function MainLayout({ children }: { children: React.ReactNode }) {
  const { state, send } = useAuth();

  useEffect(() => {
    console.log(state.context);
    console.log(send);
  }, [state]);

  console.log(children);

  return (
    <>
      <div className=" absolute inset-0 bg-[url(/grid.svg)] dark:bg-black dark:bg-[url(/whitegrid.svg)]">
        <HelmetProvider context={helmetContext}>
          <NextUIProvider>
            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
              <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
            </ThemeProvider>
          </NextUIProvider>
        </HelmetProvider>
      </div>
    </>
  );
}

export const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <MainLayout>
      <MainNavBar />
      {children}
    </MainLayout>
  );
};

export const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <MainLayout>
      <MainNavBar />
      {children}
    </MainLayout>
  );
};