How can I generically share common react-hook-form fields between Login and Register forms?

I have a login form and a register form (using react-hook-form with React hooks) in my application. Both forms use common fields such as email and password, so I created separate components like emailField and passwordField. The register form reuses the login form fields by extending LoginFormFields (i.e. RegisterFormFields extends LoginFormFields), but I run into a TypeScript error when trying to pass UseFormRegister to a component expecting UseFormRegister.

I defined emailField.tsx as follows:

TYPESCRIPTCopied
interface EmailFieldParameterTypes {
    register: UseFormRegister<LoginFormFields>;
    errors: FieldErrors<LoginFormFields>;
}

However, the compiler complains:

TYPESCRIPTCopied
Type 'UseFormRegister<RegisterFormFields>' is not assignable to type 'UseFormRegister<LoginFormFields>'.
  Type 'LoginFormFields' is missing the following properties from type 'RegisterFormFields': username, firstname, surnamets(2322)
emailField.tsx(5, 5): The expected type comes from property 'register' which is declared here on type 'IntrinsicAttributes & EmailFieldParameterTypes'

This error occurs because even though RegisterFormFields extends LoginFormFields, the generic type UseFormRegister is invariant in T. I have tried using generics, but I couldn’t resolve the issue. Any help or guidance on making EmailField accept both UseFormRegister and UseFormRegister would be appreciated.

Below are the referred files:

emailField.tsx

TYPESCRIPTCopied
import { FieldErrors, UseFormRegister } from 'react-hook-form';
import { LoginFormFields } from '../../login/loginForm';

interface EmailFieldParameterTypes {
    register: UseFormRegister<LoginFormFields>;
    errors: FieldErrors<LoginFormFields>;
}

const EmailField = ({ register, errors }: EmailFieldParameterTypes) => {
    return (
        <label className="flex flex-col gap-1">
            <div>Email</div>
            <input
                className="p-2 border border-gray-500 shadow bg-gray-200"
                id="email-input"
                type="email"
                placeholder={"enter your email"}
                {...register("email", { required: "email is required!" })}
            />
            {errors.email && <p className="text-red-400">{errors.email.message}</p>}
        </label>
    );
};

export default EmailField;

registerForm.tsx

TYPESCRIPTCopied
import { useForm } from "react-hook-form";
import EmailField from "../components/form-fields/emailField";
import PasswordField from "../components/form-fields/passwordField";
import UsernameField from "../components/form-fields/usernameField";
import { LoginFormFields } from "../login/loginForm";

export interface RegisterFormFields extends LoginFormFields {
    username: string
    firstname: string
    surname: string
}

const RegisterForm = () => {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm<RegisterFormFields>()

    const onSubmit = handleSubmit((data) => console.log(data))

    return (
        <form onSubmit={onSubmit}
            className="flex w-100 px-12 py-8 flex-col gap-3 max-w-xl shadow 2xl border border-gray-300 rounded-2xl">
            <EmailField register={register} errors={errors} />
            <PasswordField register={register} errors={errors} />
            <UsernameField register={register} errors={errors} />
            <button className="bg-blue-400 rounded shadow text-white text-lg p-2">
                Giriş Yap
            </button>
        </form>
    )
};

export default RegisterForm;

LoginForm.tsx

TYPESCRIPTCopied
import { useForm } from "react-hook-form";
import EmailField from "../components/form-fields/emailField";
import PasswordField from "../components/form-fields/passwordField";

export interface LoginFormFields {
    email: string
    password: string
}

const LoginForm = () => {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm<LoginFormFields>()

    const onSubmit = handleSubmit((data) => console.log(data))

    return (
        <form onSubmit={onSubmit}
            className="flex w-100 px-12 py-8 flex-col gap-3 max-w-xl shadow 2xl border border-gray-300 rounded-2xl">
            <EmailField register={register} errors={errors} />
            <PasswordField register={register} errors={errors} />
            <button className="bg-blue-400 rounded shadow text-white text-lg p-2">
                Giriş Yap
            </button>
        </form>
    )
};

export default LoginForm;