I have the following as my sign in form, pretty standard:

import { useId } from "react";
import { Metadata } from "next";
import { getCsrfToken } from "next-auth/react";

export const metadata = {
  title: "Sign in",
  description: "Sign into the app",
} satisfies Metadata;

export default async function SignIn() {
  const headerId = useId();
  const csrfToken = await getCsrfToken();
  return (
    <form
      method="POST"
      action="/api/auth/signin"
      className="flex flex-col gap-2 container self-center"
      aria-labelledby={headerId}
    >
      <header>
        <h2 id={headerId}>Sign in</h2>
      </header>
      <main>
        <input type="hidden" defaultValue={csrfToken} />
      </main>
    </form>
  );
}

However, whenever I run this I get the error shown in the image. Why is this? I thought the thing React was trying to accomplish with useId was precisely to make an ID that would be the same on SSR and the client