How do I get it pass TypeScript's type checking?

[tubone24]

I want to use handleSubmit to control event.target.reset.
So we set up a callback onSubmit in handleSubmit as shown below. However, I can't get the event type to work.

I tried React.BaseSyntheticEvent, but the onSubmit parameter and the callback function I set for handleSubmit don't seem to match up well.

import React, {useState} from "react";
import { useForm } from "react-hook-form";
type Inputs = {
  name: string,
  email: string,
  subject: string,
  message: string,
};

const ContactForm = () => {
  const [serverState, setServerState] = useState({ submitting: false, status: {ok: false, msg: ""} });
  const { register, handleSubmit, errors } = useForm<Inputs>();
  const handleServerResponse = (ok: boolean, msg: string) => {
    setServerState({ submitting: true, status: { ok, msg } });
  };
  // What do I do with ANY here?
  const onSubmit = (data: Inputs, e: any) => {
    const formData = new FormData();
    formData.append("name", data.name)
    formData.append("email", data.email)
    formData.append("subject", data.subject)
    formData.append("message", data.message)
    fetch('https://getform.io/f/897f187e-876d-42a7-b300-7c235af72e6d', {
      method: 'POST',
      body: formData
    })
      .then(() => {
        e.target.reset();
        handleServerResponse(true, "Submitted!");
      })
      .catch((error) => {
        alert(error)
        console.error(error)
        handleServerResponse(false, error.toString());
      });
  }

  return (
  <form onSubmit={handleSubmit(onSubmit)}>
   ...........(omitted)
  </form>
);
}

export default ContactForm

[gadicc]

I'm not sure what the "right" answer is here but I did something like this:

function onSubmit(data: Inputs, _event?: React.BaseSyntheticEvent) {
  const event = _event as React.SyntheticEvent<HTMLFormElement, SubmitEvent> | undefined;
  //...
}

and it works great. The function signature matches and we still get correct types for event.*.