Re-useable input fields

[FrederikJorgensen]

How can I create a re-useable input field that I'm using in 2 different forms that have different schemas?

Example use-case:

type SignUpForm = {
  password: string;
  randomFieldA: string;
};

type ResetPasswordForm = {
  password: string;
  randomFieldB: string;
};

I want to do something like this where I just give the component either a register or control or something:

// How can I make this reuseable?
function reuseablePasswordInput<T>({
  register,
}: {
  register: UseFormRegister<T>;
}) {
  return (
    <input
      {...register("password", {
        minLength: {
          value: 8,
          message: "Too short",
        },
      })}
    />
  );
}

Here is an example sandbox of what I mean:
https://codesandbox.io/p/sandbox/sad-bash-mdyx7d