Next.js Clerk auth - Error: Only plain objects can be passed to Client Components

Question

I am using Clerk auth with Next.js. While trying to pass the user (props) object from the server component to the client component it generates the following error:

Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.

Is there any other way to resolve this? anything i am missing?

That's the server component

import Link from "next/link";
import UserNav from "./UserNav";
import { currentUser } from "@clerk/nextjs";

export default async function Navbar() {
  const user = await currentUser();

  return (
    <nav className="w-full border-b">
      <div className="container mx-auto">
        <Link href="/" className="font-bold">
          Logo
        </Link>

        <UserNav user={user} />
      </div>
    </nav>
  );
}

The client component is using the react useState to switch the icon when the Dropdown menu is closed or open. I intentionally want to receive the user using the server function and not the client one.

The client component

"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

import { CircleUserRound, Menu, X } from "lucide-react";

interface UserNavProps {
  user: {
    id: string;
    imageUrl: string;
    firstName: string;
    primaryEmailAddress: {
      emailAddress: string;
    };
  };
}

export default function UserNav({ user }: UserNavProps) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <DropdownMenu
      onOpenChange={(open: boolean) => {
        setIsOpen(open);
      }}
    >
      <DropdownMenuTrigger className="outline-none">
        <div className="flex items-center gap-x-3 rounded-full border p-3">
          {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}

          {user?.imageUrl ? (
            <Image
              src={user.imageUrl}
              alt=""
              width={30}
              height={30}
              className="rounded-full">
            </Image>
          ) : (
            <CircleUserRound size={30}></CircleUserRound>
          )}
        </div>
      </DropdownMenuTrigger>
      //.... the rest of the items in the menu content
       </DropdownMenu>
     );
   }