Как получить значения формы из модальной формы в форму netlify в gatsby

Question

Я пытаюсь сохранить значения формы в форме netlify. При разработке статического сайта в gatsby использовался функциональный компонент, а для форм я использую модальный режим boost. Я пытаюсь сохранить значения в форме netlify. Я добавил необходимые поля и теги для связи с формой netlify, я также пробовал использовать обычную форму html. Но я не мог видеть значения формы в формах netlify. Может ли кто-нибудь направить меня к достижению результата. Я разместил код ниже. Заранее спасибо.

       function Home() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    linkedin: "",
    skillset: "",
    experience: "",
  })

  const [show, setShow] = useState(false)

  const handleShow = () => setShow(true)

  const handleChange = e => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

  const handleClose = () => setShow(false)

  const encode = data => {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
      .join("&")
  }

  const handleonSubmit = e => {
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", ...formData }),
    })
      .then(() => alert("Success!"))
      .catch(error => alert(error))

    e.preventDefault()
  }

  return (
    <Layout>
      <div className={Styles.content}>
        <Container>
          <Row>
            <div>
              <div
                className="d-flex align-items-center justify-content-center"
                style={{ height: "100vh" }}
              >
                <Button variant="primary" onClick={handleShow}>
                  Launch Form modal
                </Button>
              </div>
              <Modal
                show={show}
                onHide={handleClose}
                style={{ float: "right" }}
                // onSubmit={handleSubmit}
              >
                <Modal.Header closeButton>
                  <Modal.Title>Details:</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                  <Form data-netlify="true" onSubmit={handleonSubmit}>
                    {/* <input type="hidden" name="contact" value="Form-Details" /> */}

                    <Form.Group controlId="formBasicName">
                      <Form.Label>Name</Form.Label>
                      <Form.Control
                        type="text"
                        name="name"
                        placeholder="Your Name"
                        value={formData.name}
                        onChange={handleChange}
                      />
                    </Form.Group>

                    <Form.Group controlId="formBasicEmail">
                      <Form.Label>Email address</Form.Label>
                      <Form.Control
                        type="email"
                        name="email"
                        placeholder="Enter email"
                        value={formData.email}
                        onChange={handleChange}
                      />
                    </Form.Group>
                     <Button type="submit">Submit</Button>
                      </Form>
                </Modal.Body>
              </Modal>
            </div>
               </Container>
      </div>
    </Layout>