Where to place form related JS function in React for my lambda contact form?

I am trying to use a lambda function to sent contact form submissions to an email. The site is built on React, the lambda was built following the guide they suggest Building a serverless contact form with AWS Lambda and AWS SES

However, the issue is that in the guide he uses vanilla JS instead of something more suitable for React and I can't figure out where to place the JS code or if I need to do something else to make it work.

The lambda function work and I can send emails using a curl command such as

curl --header "Content-Type: application/json" \
  --request POST \
  --data '{"email":"john.doe@email.com","name":"John Doe","content":"Hey!"}' \
  https://{id}.execute-api.{region}.amazonaws.com/{stage}/email/send

But it does not function on the form directly because the function is expecting a header "Content-Type: application/json" so I need to add this snippet of JS code, but I don't know where and the site is failing because of that.

const form = document.getElementById('contactForm')
const url = 'https://{id}.execute-api.{region}.amazonaws.com/{stage}/email/send'
const toast = document.getElementById('toast')
const submit = document.getElementById('submit')

function post(url, body, callback) {
  var req = new XMLHttpRequest();
  req.open("POST", url, true);
  req.setRequestHeader("Content-Type", "application/json");
  req.addEventListener("load", function () {
    if (req.status < 400) {
      callback(null, JSON.parse(req.responseText));
    } else {
      callback(new Error("Request failed: " + req.statusText));
    }
  });
  req.send(JSON.stringify(body));
}
function success () {
  toast.innerHTML = 'Thanks for sending me a message! I\'ll get in touch with you ASAP. :)'
  submit.disabled = false
  submit.blur()
  form.name.focus()
  form.name.value = ''
  form.email.value = ''
  form.content.value = ''
}
function error (err) {
  toast.innerHTML = 'There was an error with sending your message, hold up until I fix it. Thanks for waiting.'
  submit.disabled = false
  console.log(err)
}

form.addEventListener('submit', function (e) {
  e.preventDefault()
  toast.innerHTML = 'Sending'
  submit.disabled = true

  const payload = {
    name: form.name.value,
    email: form.email.value,
    content: form.content.value
  }
  post(url, payload, function (err, res) {
    if (err) { return error(err) }
    success()
  })
})

<form id="contactForm">
  <input type="text" name="name" required placeholder="Your name" />
  <input type="email" name="email" required placeholder="Your email address" />
  <input type="text" name="phone_number" required placeholder="Your phone number" />
  <textarea name="message" required placeholder="Write your message..." >
  </textarea>
  <button id="submit" type="submit">Send
    <i className="flaticon-tick"></i> 
  </button>
</form>

And the form is located inside a react functional component:

const ContactForm = () => {
    return (
        <form>
            <!-- Above form is here -->
        </form>
    )
}
export default ContactForm

I am trying to imbed it directly into the component but it seems like that is not working. Where should this JS code be within my React project?

I am not sure if I need to use something like a hook in React. (I am pretty now to react and don't really understand how all that works yet)

This is the repository:Deep-Blue

and the site is located at deep-blue.io

I also asked the Gatsby community and did not get an answer, I have been looking at many different tutorials like, this one but they all either use different technologies or fall short of explaining how to handle form submissions in ReactJS with GastbyJS

from Where to place form related JS function in React for my lambda contact form?