RSC error

import { Button } from "@/components/ui/button";
import { getServerAuthSession } from "@/server/auth";
import { Rocket } from "lucide-react";
import Link from "next/link";
async function Header() {
  const session = await getServerAuthSession();
  const user = session?.user;
  return (
    <header className="flex h-14 items-center px-4 lg:px-6">
      <Link className="flex items-center justify-center" href="#">
        <Rocket className="mr-2 h-6 w-6" />
        <span className="font-bold">Home</span>
      </Link>
</header/>
)
}

export default function Page(){
return
(
...
<Header/>
)
}
'Header' cannot be used as a JSX component.
  Its type '() => Promise<Element>' is not a valid JSX element type.
    Type '() => Promise<Element>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Promise<Element>' is not assignable to type 'ReactNode'.ts(2786)

import { Button } from "@/components/ui/button";
import { getServerAuthSession } from "@/server/auth";
import { Rocket } from "lucide-react";
import Link from "next/link";
async function Header() {
  const session = await getServerAuthSession();
  const user = session?.user;
  return (
    <header className="flex h-14 items-center px-4 lg:px-6">
      <Link className="flex items-center justify-center" href="#">
        <Rocket className="mr-2 h-6 w-6" />
        <span className="font-bold">Home</span>
      </Link>
</header/>
)
}

export default function Page(){
return
(
...
<Header/>
)
}
'Header' cannot be used as a JSX component.
  Its type '() => Promise<Element>' is not a valid JSX element type.
    Type '() => Promise<Element>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Promise<Element>' is not assignable to type 'ReactNode'.ts(2786)