Correct way to get FormData from SyntheticEvent

I followed some other response on how to submit form data using React form's onSubmit to pass what comes out to console as SyntheticBaseEvent to a function called handleSubmit. Right now I'm just destructuring the object into its values and I do it manually. I figured out what I want to access but I'm relatively certain you should be able to create a FormData object that will do the necessary work for me.

Here is the code snippet that is relevant:

export default function Login() {

    function handleSubmit(event: SyntheticEvent) {
        event.preventDefault();
        console.log(event);
        console.log(event.target[0].value)
        const temp = new FormData(event.target as HTMLFormElement);
        console.log(temp);
    
      }
    return (
        <div className="mx-[40%] mt-[10%] ">
            <form onSubmit={handleSubmit} className="bg-white shadow-md outline-blue-200 outline rounded px-6 pt-6 pb-4 mb-4">

Here is the console output:

Notice the type coercion that is required for TypeScript to be happy. Removing the type hint from the function allows you to do new FormData(event.target) but the output to console is the same.