Clerk Webpack Importing Error

Unhandled Runtime Error

Error: (0 , _clerk_nextjs__WEBPACK_IMPORTED_MODULE_1__.useUser) is not a function

import { UserButton, useUser } from "@clerk/nextjs";

const Sidebar = () => {
  const user = useUser();

  return (
    <header
      className="..."
    >
      <div className="...">
        <h1>Work in Progress</h1>
      </div>

      <div className="..."></div>

      <div className="...">
        <UserButton afterSignOutUrl="/" />
        <h2 className="...">Welcome, {user?.fullName}</h2>
      </div>
    </header>
  );
};

export default Sidebar;