Re-usable forms

[UltraWelfare]

My use-case is as following;
I have a rather complex "Create a Project" form. Some fields are dynamically generated from API queries, the validation schema is also dynamically generated.
This form exists in an authenticated route (/projects/create) but should also exist in the registration form... From the landing page you can click "Create a project" and in the case of not having an account, you can create a project and register at the same time.. Then all the data is being submitted at once.
I don't wanna copy-paste the whole create a project form into the registration page...

One way I thought of is to have two different useForms in the parent component; one for the project creation and once again for the registration. This is kinda "messy" and feels like a huge workaround but could work I guess?

Ideally what I was thinking was something like:

// components/projects/project-form.tsx

export type ProjectFormValues = {
   title: string;
   // omitted for brevity
}

export default function ProjectForm(props) {
   return <>
      <input {props.register(props.prefix + 'title')} />
   </>
}

// routes/auth/registration-form.tsx

type RegistrationFormValues = {
   username: string;
   // omitted for brevity
};
type FormValues = {
  register: RegistrationFormValues
  project: ProjectFormValues
};

export default function RegisterPage() {
  const formMethods = useForm<FormValues>();
  return <form submit={..}>
    <input {...formMethods.register('register.username')} />
    <ProjectForm {...formMethods} prefix={'project.'} />
  </form>
}

But this would completely destroy type-safety... Are there any good ideas on how to handle that?