I'm getting this error:

./app\components\Navbar.tsx
ReactServerComponentsError:

You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[C:\Users\Lorenzo\Desktop\heisensarms\app\components\Navbar.tsx:1:1]
 1 │ import { useRouter } from "next/router";
 2 │ import { useEffect, useRef } from "react";
   ·                     ──────
 3 │ import { useUser } from "@clerk/nextjs";
 4 │ import { UserButton } from "@clerk/nextjs";
 4 │ 
   ╰────

Maybe one of these should be marked as a client entry with "use client":
  ./app\components\Navbar.tsx
  ./app\page.tsx

this message already said you need to add 'use client' to make it a client component

I've already tried, and got this error:

Error: UserContext not found
  11 | const Navbar: React.FC<NavbarProps> = ({ title = 'Heisen' }) => {
> 12 | const { user } = useUser();
     |                        ^
  13 | const router = useRouter();
  14 | const allowedUsers = ['user_', 'uuid2', 'uuid3'];
  15 | const contentRef = useRef(null);