I am importing 'next/headers'

import { headers } from "next/headers";

export const CategoryProvider = async (props: IProps) => {
  let categories: Category[] = [];
  const nextHeaders = await headers();

  try {
    categories = await new CategoryService(nextHeaders).paginate();
  } catch (error) {}

  return (
    <CategoryProviderClient categories={categories}>
      {props.children}
    </CategoryProviderClient>
  );
};

The problem is children can be client component

const SearchTemplates = async (props: IProps) => {
  return (
          <CategoryProvider>
            <SearchAsideWrapper query={props.query} />
          </CategoryProvider>
  );
};

the code sounds ok for me, but when buiding i keep getting this error

/CategoryProvider/index.tsx
Error:   x 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/app/building-
  | your-application/rendering/server-components
   ,/CategoryProvider/index.tsx:5:1]
 2 | import { CategoryProviderClient } from "./CategoryProviderClient";
 3 | import { Category } from "../../../types/category.type";
 4 | import { CategoryService } from "../../../services/category";
 5 | import { headers } from "next/headers";
   : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^