Форма подачи неполной информации из-за троичного оператора (React)

Question

У меня есть троичный оператор, условно отображающий некоторые поля формы в моей StyledForm.

Поля над троичной областью просто отлично передаются в мою функцию handleFormSubmit, а поля, которые условно отображаются, - нет.

Для подтверждения, состояние правильное и содержит все значения поля.

Мой handleFormSubmit, который работает нормально и передает все до условно визуализированных полей:

  const handleFormSubmit = e => {
    e.preventDefault()
    const form = e.target
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": form.getAttribute("name"),
        ...state,
      }),
    }).catch(error => alert(error))
  }

Я могу подтвердить, что мое состояние обновляется правильно.

Мои условно визуализированные поля формы (см. После тега):

return (
    <Box maxWidth="575px" mx="auto">
      <StyledForm
        id="contact"
        name="contact"
        method="post"
        data-netlify="true"
        data-netlify-honeypot="bot-field"
        onSubmit={handleFormSubmit}
      >
        <input type="hidden" name="bot-field" />
        <input type="hidden" name="form-name" value="contact" />
        <input
          type="text"
          name="name"
          placeholder="Your name"
          onBlur={handleBlur}
          onChange={handleChange}
          // value={values.name}
          required
        />

        <input
          type="text"
          name="email"
          placeholder="Email"
          onBlur={handleBlur}
          onChange={handleChange}
          // value={values.email}
          required
        />
        <input
          type="text"
          name="telephone"
          placeholder="Phone"
          onBlur={handleBlur}
          onChange={handleChange}
          // value={values.telephone}
          required
        />
        <input
          type="text"
          name="company"
          placeholder="Company name"
          onBlur={handleBlur}
          onChange={handleChange}
          // value={values.company}
          required
        />
        <select
          name="select"
          type="select"
          id="select"
          onChange={event => setSelect(event.target.value)}
        >
          <option value="">What are you interested in?</option>
          <option value="sovereign">
            Sovereign rated loans (Potential user)
          </option>
          <option value="media">Sovereign rated loans (Media interest)</option>
          <option value="general">General enquiry</option>
        </select>

        {select === "sovereign" ? (
          <div>
            <input
              type="text"
              name="nature"
              placeholder="Nature of company"
              onBlur={handleBlur}
              onChange={handleChange}
              // value={values.nature}
              required
            />
            <input
              type="text"
              name="employees"
              placeholder="Number of employees"
              onBlur={handleBlur}
              onChange={handleChange}
              // value={values.employees}
              required
            />
            <input
              type="text"
              name="hrname"
              placeholder="Name of internal HR/Payroll contact"
              onBlur={handleBlur}
              onChange={handleChange}
              // value={values.hrname}
              required
            />
            <input
              type="text"
              name="hremail"
              placeholder="Email of internal HR/Payroll contact"
              onBlur={handleBlur}
              onChange={handleChange}
              // value={values.hremail}
              required
            />
            <input
              type="text"
              name="payrollcost"
              placeholder="Total monthly payroll cost (£)"
              onBlur={handleBlur}
              onChange={handleChange}
              // value={values.payrollcost}
              required
            />
            <input
              type="text"
              name="furloughed"
              placeholder="Number of furloughed employees"
              onBlur={handleBlur}
              onChange={handleChange}
              // value={values.furloughed}
              required
            />
            <input
              type="text"
              name="payrollprovider"
              placeholder="Who is your payroll provider?"
              onBlur={handleBlur}
              onChange={handleChange}
              // value={values.payrollprovider}
              required
            />
          </div>
        ) : null}

        {select === "media" ? (
          <textarea
            type="text"
            name="message"
            placeholder="Your message..."
            onChange={handleChange}
            // value={values.message}
          />
        ) : null}

        {select === "general" ? (
          <textarea
            type="text"
            name="message"
            placeholder="Your message..."
            onChange={handleChange}
            // value={values.message}
          />
        ) : null}

        {/* {success && (
        <Text variant="p1" fontSize="14px" color="success">
          {success}
        </Text>
      )} */}
        <Flex justifyContent="flex-end">
          <button type="submit">
            <Box variant="contained">Send</Box>
          </button>
        </Flex>
      </StyledForm>
    </Box>
  )

Я не понимаю, почему мое состояние обновляется, но только поля над моей троицей отправляются через мой handleFormSubmit.

Надеюсь, этого достаточно.

Вся помощь очень ценится!