ReactJS & Typescript - Get elements from form in handle submit

form_handlesumbit.tsx

import React, {SyntheticEvent} from 'react'

const Login = () => {

  const handleSubmit = async (evt: SyntheticEvent) => {
          evt.preventDefault()
          const target = evt.target as HTMLFormElement
          const elements = target.elements as typeof target.elements & {
              email: {value: string}
              password: {value: string}
          }

          if (!email.value) setEmailValMsg('The email is required')
          else setEmailValMsg('')

          if (!password.value) setPasswordValMsg('The password is required')
          else setPasswordValMsg('')

          setIsFetching(true)

          const strBody: BodyInit = `{"email":"${email}","password":"${password}"}`
          await fetch('/login', {
              method: 'POST',
              mode: 'cors',
              headers: {
                  Accept: 'application/json',
                  'Content-Type': 'application/json',
              },
              body: strBody,
          })

          setIsFetching(false)
      }
}

export default Login