I get this error when using Clerk's <UserButton />

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

import { ReactNode } from "react";

import { UserButton } from "@clerk/nextjs";
import { AppSidebar } from "~/components/app-sidebar";
import { ScreenSize } from "~/components/screen-size";
import { ThemeButton } from "~/components/theme-button";
import { Button } from "~/components/ui/button";
import { SidebarTrigger } from "~/components/ui/sidebar";

export default function DashboardLayout({ children }: { children: ReactNode }) {
  return (
    <>
      <AppSidebar />
      <ScreenSize />

      <div className="w-full">
        <Navbar />
        <div className="h-full overflow-auto">{children}</div>
      </div>
    </>
  );
}

function Navbar() {
  return (
    <nav className="bg-background sticky top-0 flex h-14 w-full items-center justify-between gap-2 border-b px-4">
      <Button size="icon" variant="outline" asChild>
        <SidebarTrigger />
      </Button>
      <div className="flex items-center gap-2">
        <ThemeButton />
        <div className="size-7">
          <UserButton />
        </div>
      </div>
    </nav>
  );
}

In my previos implementations of Clerk I wasn't running into this problem tho.
Setting the component as Dynamic like this

import dynamic from "next/dynamic";

const ClerkButton = dynamic(() => import("./clerk-button"), { ssr: !!false });

and using <ClerkButton /> instread of the UserButton inside the div fixes it tho. I just dont get why I have to do it now when I didn't before.