Error: (0 , next_auth_react__WEBPACK_IMPORTED_MODULE_6__.useSession) is not a function

For manging the auth sesssion in imy next.js application i am use the useSession hook because my component is a client component. I am unale to call the const session = await auth(); as we can’t add async in our component.

import { handleSignOut } from '@/utilities/serverAction';
import { useSession } from 'next-auth/react';

const NavBar = () => {
  // const session = await auth();
  const { data: session, status } = useSession();

  const handleSignOutClick = async () => {
    await handleSignOut();
  };
return ( 
<>
{!session ? (
        <>
          <Link href={'/login'}>
            <Button label="Login" className="mr-4" />
          </Link>
          <Link href={'/signup'}>
            <Button label="Sign Up" />
          </Link>
        </>
      ) : (
        <form action={handleSignOutClick}>
          <Button label="Sign out" />
        </form>
      )}
</>
  );
};

this image shows the code

so i am getting this below error.
layoutNavBar.tsx (11:46) @ useSession
⨯ TypeError: (0 , next_auth_react__WEBPACK_IMPORTED_MODULE_6__.useSession) is not a function
at NavBar (./layout/NavBar.tsx:24:98)
at stringify ()
digest: “1077096436”

I tried to reinstall next-auth. but that did not work for me.