interface FormElements extends HTMLFormControlsCollection {
  usernameInput: HTMLInputElement
}
interface UsernameFormElement extends HTMLFormElement {
  readonly elements: FormElements
}

const MyForm = () => {

// const handleSubmit = (e: React.SyntheticEvent< UsernameFormElement >) => {

const handleSubmit(event: React.FormEvent<HTMLFormElement>) => {
   e.preventDefault()

   // Handle it in some way

   const form = event.currentTarget
   const formElements = form.elements as typeof form.elements & {
      usernameInput: {value: string}
  }
}

return (
    <form className="my-form" onSubmit={handleSubmit}>
      <div>
        <label htmlFor="usernameInput">Username:</label>
        <input id="usernameInput" type="text" />
      </div>
      <button type="submit">Submit</button>
    </form>

    </form>
  )
}