How to reuse a form and modify it

I created this login form, but I want to use the same form for registration, but how can I do that? How can I change things like the input type? Can someone help me with this please?

import styles from '../../../styles/components/FormLogin.module.css'
import Link from 'next/link';
import { useForm } from 'react-hook-form';
import { WriteNowResolver } from '../validations/WriteValidation'

interface loginForm {
  username: string;
  password: string;
  formTitle: string;

}

export default function Form(props: any) {

  const { formState: { errors }, register, handleSubmit } = useForm({
    resolver: WriteNowResolver,
    defaultValues: {
      username: '',
      password: '',
    }
  })

  function onSubmit(values: any) {
    console.log(values)
  }

  return (
    <>
      <div className={styles.formContainer}>
        <form id="form" className={styles.form} onSubmit={handleSubmit(onSubmit)}>
          <h2
            className={styles.formTitle}>
            {props.formTitle}
          </h2>
          <div className={styles.formControl}>
            <label htmlFor="username" className="sr-only">Username</label>
            <input
              {...register("username")}
              type="text"
              name="username"
              placeholder={props.formPlaceholder1}
            // required
            />
            {errors?.username?.message && (
              <small className="errorText">{errors?.username?.message}</small>
            )}
          </div>

          <div className={styles.formControl}>
            <label htmlFor="text" className="sr-only">Password</label>
            <input
              {...register("password")}
              type="password"
              name="password"
              placeholder={props.formPlaceholder2}

            // required

            />
            {errors?.password?.message && (
              <small className="errorText">{errors?.password?.message}</small>
            )}
          </div>

          {/* SUBMIT BUTTON */}
          <button className={`${styles.formButton} ${styles.login}`} type="submit">{props.formButton1}</button>

          <p className={styles.formTextPassword}>
            <Link href="#"><a>Forget password ?</a></Link>
          </p>

          <div className={styles.separator}>
            <div></div>
            <div>Ou</div>
            <div></div>
          </div>
        </form>

        {/* REGISTER BUTTON */}
        <button className={`${styles.formButton} ${styles.register}`} type="button">
          <Link href="#"><a>Register</a></Link>
        </button>

        {/* GOOGLE BUTTON */}
        <button className={`${styles.formButton} ${styles.google}`} type="submit"> 
          Enter with Google
        </button>
      </div>
    </>
  )
}