React + GetForm Google recaptcha v3 contactform

Question

I am trying to setup Google recaptcha v3 for my GatsbyJS site using getform.io and react-google-recaptcha-v3.

It seems like I have followed the documentation but for some reason spam still keeps coming in. I do see the Google recaptcha badge on website though.

I have made my page with contact form like this (getform URL is dummy, it is correct on live site ofc):

import React from "react"
import styled from "styled-components"
import { useState } from "react"
import { useGoogleReCaptcha } from "react-google-recaptcha-v3"

export const ContactForm = () => {
  const { executeRecaptcha } = useGoogleReCaptcha()

  const useFormInput = initialValue => {
    const [value, setValue] = useState(initialValue)
    const handleChange = e => {
        setValue(e.target.value)
    }
    return {
        value,
        onChange: handleChange,
    }
  }

  const email = useFormInput('')
const message = useFormInput('')
const name = useFormInput('')
const phone = useFormInput('')

// this will be important later
const emailVal = email.value
const messageVal = message.value
const phoneVal = phone.value
const nameVal = name.value
const handleSubmit = e => {
  e.preventDefault() //--> prevent the page from reloading on form submit

  if (!executeRecaptcha) {
    return
  } 
  const data = JSON.stringify({ emailVal, messageVal, phoneVal, nameVal })


  fetch("https://getform.io/f/dd", {
    method: "POST",
    headers: {
      Accept: "application/json, text/plain, */*",
      "Content-type": "application/json",
    },
    body: data,
  })
}

  return (
    <Form
      action="https://getform.io/f/dd"
      method="POST"
      onSubmit={handleSubmit}
    >
      <ContactHeading>Vil du samarbejde med os?</ContactHeading>
      <ContactText>Udfyld formularen, så kontakter vi dig.</ContactText>
      <Column>
        <Input type="text" name="name" {...name} id="the-name" placeholder="Navn" />
        <Input type="email" name="email" {...email} id="the-email" placeholder="Email" />
        <Input type="tel" name="phone" {...phone} id="the-phone" placeholder="Telefon" />
      </Column>
      <Column>
        <Textarea
          name="message"
          {...message}
          id="the-message"
          placeholder="Eventuel information om din virksomhed"
        />
        <Submit type="submit" />
      </Column>
    </Form>
  )
}

Furthermore, I am also using gatsby-browser.js to wrap all of my Gatsby app with the reCAPTCHA provider. I have also tried with using gatsby-ssr.js:

import React from 'react'
import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
export const wrapRootElement = ({ element }) => {
    return (
        <GoogleReCaptchaProvider reCaptchaKey="dummykey">
            {element}
        </GoogleReCaptchaProvider>
    )
}