Cannot add a queryprovider components

[kingrootid]

i use this template https://demos.pixinvent.com/vuexy-nextjs-admin-template/demo-1/en/pages/user-profile

and i implement in a components/Providers.tsx
like this

import { QueryClient, QueryClientProvider } from "react-query";

type Props = ChildrenType & {
  direction: Direction;
};

const queryClient = new QueryClient();

const Providers = (props: Props) => {
  // Props
  const { children, direction } = props;

  // Vars
  const mode = getMode();
  const settingsCookie = getSettingsFromCookie();
  const systemMode = getSystemMode();

  return (
    <QueryClientProvider client={queryClient}>
      <VerticalNavProvider>
        <SettingsProvider settingsCookie={settingsCookie} mode={mode}>
          <ThemeProvider direction={direction} systemMode={systemMode}>
            <ReduxProvider>{children}</ReduxProvider>
            <AppReactToastify direction={direction} hideProgressBar />
          </ThemeProvider>
        </SettingsProvider>
      </VerticalNavProvider>
    </QueryClientProvider>
  );
};

export default Providers;

And i got an error

./src/@core/utils/serverHelpers.ts
Error: 
  × You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-started/
  │ react-essentials#server-components
  │ 
  │ 
   ╭─[school-frontend\src\@core\utils\serverHelpers.ts:1:1]
 1 │ // Next Imports
 2 │ import { cookies } from 'next/headers'
   · ──────────────────────────────────────
 3 │ 
 4 │ // Third-party Imports
 4 │ import 'server-only'
   ╰────

  × You're importing a component that needs server-only. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-started/
  │ react-essentials#server-components
  │ 
  │ 
   ╭─[school-frontend\src\@core\utils\serverHelpers.ts:2:1]
 2 │ import { cookies } from 'next/headers'
 3 │ 
 4 │ // Third-party Imports
 5 │ import 'server-only'
   · ────────────────────
 6 │ 
 7 │ // Type Imports
 7 │ import type { Settings } from '@core/contexts/settingsContext'
   ╰────