So I'm trying to implement a simple credentials authentication with next-auth, and I'm having trouble rendering a button on my navbar as 'Sign in' or 'Sign out' based on whether the use is logged out or not.
Here's my code:

//Navbar.tsx
import Link from 'next/link';
import { buttonVariants } from '@/UI/widgets/button';
import { HandMetal } from 'lucide-react';
import UserNav from './UserNav';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';



const Navbar = async () => {
  const session = await getServerSession(authOptions);
  return (
    <div className='bg-zinc-900 py-2 border-b border-s-zinc-200 fixed w-full z-10 top-0'>
      <div className='container flex items-center justify-between'>
        <Link href='/'>
          <HandMetal />
        </Link>
        {session?.user ? (
          <UserNav />
        ) : (
          <Link className={buttonVariants()} href='/login'>
            Sign in
          </Link>
        )}
      </div>
    </div>
  );
};

export default Navbar;

//Usernav.tsx
'use client'

import { Button } from "@/UI/widgets/button"
import { signOut } from "next-auth/react"

const UserNav = () => {
  return (
    <Button variant="destructive" onClick={() => signOut({
        redirect: true,
        callbackUrl: `${window.location.origin}/login`
    })}>
        Sign Out
    </Button>
  )
}

export default UserNav

Here's my whole github repo for reference:
https://github.com/sanjana-bhat-2002/wordle-clone

Errors im getting: https://srcb.in/jLPnmaPUsW
I have not included the client component (UserNav) directly, based on the suggestion of this video:https://youtu.be/bicCg4GxOP8?si=VXAsNTynCbO8cMeM&t=3556