How to pass a component as prop to <DataTable> in NextJS

[lomirus]

I have a table and its data are static so I marked it as "use server":

'use server'

export default function Cart() {
  const items= getItems();

  return (
    <div>
      <DataTable value={items} header={<Header />}>
        <Column field="id" header="ID" />
        <Column field="name" header="Name" />
      </DataTable>
    </div>
  );
}

There is also a header that uses the useState(), so it has to be marked as "use client":

'use client';

export default function Header() {
  const router = useRouter();
  const [dialogVisible, setDialogVisible] = useState(false);

  return (<div>
    <Dialog visible={dialogVisible}>Something</Dialog>
    <Button onClick={() => setDialogVisible(true)} />
  </div>);
}

However, every time I attempted to use the <Header> in <DataTable>, it gives me an error:

 Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". 

But it cannot be marked with "use server", because it uses the useState(). How should I solve this error?

[melloware]

I am not positive but all PrimeReact components are UI components and have to be marked use client. I am not an SSR expert but UI related code cannot run on the server as their is no "browser" or "window".