Here is my very basic example, using a form. I have this as my base:

export default async function SignInPage() {
  return (
    <div className="grid min-h-screen w-screen place-items-center">
      <div className="container w-full">
        <form className="w-full rounded-md border-2 p-4">
          <header className="text-2xl font-bold">
            <h1>Sign in</h1>
          </header>
        </form>
      </div>
    </div>
  );
}

I will want to include an id to reference what the actual label of the form is. I want to do something like this then:

import { useId } from "react";

export default async function SignInPage() {
  const headerId = useId();
  return (
    <div className="grid min-h-screen w-screen place-items-center">
      <div className="container w-full">
        <form
          aria-labelledby={headerId}
          className="w-full rounded-md border-2 p-4"
        >
          <header className="text-2xl font-bold">
            <h1 id={headerId}>Sign in</h1>
          </header>
        </form>
      </div>
    </div>
  );
}

Rules of hooks complains about this, and says I shouldn't be using useId. When I run it, it does seem to work
Ideally, I would like to be able to use a context to abstract this, but I don't know if that's possible on the server. Something like this:

export default async function SignInPage() {
  const headerId = useId();
  return (
    <div className="grid min-h-screen w-screen place-items-center">
      <div className="container w-full">
        <Form>
          <FormHeader>Sign in</FormHeader>
        </Form>
      </div>
    </div>
  );
}

What is the correct way to handle this?