How to type a React Form with submit handler

SubmitFormHandler.tsx

import React from 'react';

export type GenHTMLFormControlsCollection<T> = HTMLFormControlsCollection & {
  [inputName in keyof T]: HTMLInputElement;
};

interface GenericFormElement<T extends { [inputName: string]: HTMLInputElement }>
  extends HTMLFormElement {
  readonly elements: GenHTMLFormControlsCollection<T>;
}

function SubmitFormHandler() {
  const onSumitForm = (
    event: React.FormEvent<
      GenericFormElement<{ usernameInput: HTMLInputElement; passwordInput: HTMLInputElement }>
    >,
  ) => {
    event.preventDefault();
    console.log('usernameInput', event.currentTarget.elements.usernameInput.value);
    console.log('passwordInput', event.currentTarget.elements.passwordInput.value);
  };
  return (
    <form onSubmit={onSumitForm}>
      <input name='usernameInput' />
      <input name='passwordInput' />
      <input type='submit'>Submit</input>
    </form>
  );
}

export default SubmitFormHandler;