Форма Netlify не регистрирует поле при использовании пользовательского интерфейса материала проверки JavaScript в React

Question

Я создаю контактную форму Netlify с Гэтсби. Я использую Material UI для проверки полей, для полей ввода я использую «текстовое поле» Material UI.

Но я заметил, что Netlify не регистрирует поля ввода, когда я использую текстовое поле компонента из Material UI. Он по-прежнему регистрирует бот-поле, и форма, кажется, работает нормально при проверке на Netlify. Просто форма пуста, потому что она не регистрирует поля ввода.

Есть идеи, как я могу это решить?

Форма

            <form
        className='flex flex-col max-w-xl m-auto px-4 pt-12 pb-8 lg:pt-16 font-sans formFont'
        id='myForm'
        method="post"
        action='/thank-you'
        netlify-honeypot="bot-field"
        data-netlify="true"
        name="contact"
        noValidate
        autoComplete="off"
        onSubmit={handleSubmit}
      >

        {/* bot protection */}
        <input type="hidden" name="bot-field" />
        <input type="hidden" name="form-name" value="contact" />

        {/* name */}
        <div className="mr-2 font-sans max-w-sm pb-4" >
          <TextField
            type="text"
            onChange={(e) => setFirstNameField(e.target.value)}
            fullWidth
            id="outlined-basic"
            variant="outlined"
            label={name}
            helperText={firstNameError ? `${fillName}` : null}
            required
            error={firstNameError}
          >
          </TextField>
        </div>

        {/* email */}
        <div className="pb-4 w-full">
          <TextField
            onChange={(e) => setEmailField(e.target.value)}
            fullWidth
            id="outlined-basic"
            label={email}
            variant="outlined"
            helperText={emailError ? `${enterValidEmail}` : null}
            required
            error={emailError}
          />
        </div>

        {/* subject */}
        <div className="pb-4 w-full">
          <TextField
            fullWidth
            id="outlined-basic"
            label={subject}
            variant="outlined"
          />
        </div>

        {/* message */}
        <div className="pb-4 w-full">
          <TextField
            onChange={(e) => setMessageField(e.target.value)}
            helperText={messageError ? `${enterMessage}` : `${required}`}
            fullWidth
            multiline
            minRows={4}
            id="outlined-basic"
            label={message}
            variant="outlined"
            required
            error={messageError}
          />
        </div>

        <PrimaryButton type="submit">
          send message
        </PrimaryButton>

      </form>

Проверка Javascript

        const handleSubmit = (e) => {
    setFirstNameError(false)
    setEmailError(false)
    setMessageError(false)

    if (firstNameField === '') {
      e.preventDefault()
      setFirstNameError(true)
    }
    if (!emailField.match(/^[^@\s]+@[^@\s]+\.[^@\s]+$/)) {
      e.preventDefault()
      setEmailError(true)
    }
    if (messageField === '') {
      e.preventDefault()
      setMessageError(true)
    }
  }