I’m getting

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

When importing a server component inside a client component. So I looked it up online and the solutions are to pass the server component as a child to the client component, so I did id:

"use client";

import type { PropsWithChildren } from "react";

const ClientComponent = ({ children }: PropsWithChildren) => {
  return <>{children}</>;
};

export default ClientComponent;

And wrapping the server component:

import ClientComponent from "./client-component";

export const Header = ({ children }: PropsWithChildren) => {
  return (
    <header className="h-16 bg-green-500 px-9 py-5 rounded">
      <div className="flex flex-row justify-between items-center">
        {children}

        <ClientComponent>
          <UserInfo /> // server component
        </ClientComponent>
      </div>
    </header>
  );
};

But to no success, still getting the same error.