How to install react-google-recaptcha-v3 on a Gatsby project

Question

I have successfully installed react-google-recaptcha-v3 on my Gatsby project. My gatsby-ssr.js and gatsby-browser.js files looks like this:

import React from "react"
import { PageContextProvider } from "./src/providers/page_context"
import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3"

export const wrapPageElement = ({ element, props }) => (
  <main>
    <GoogleReCaptchaProvider reCaptchaKey={process.env.RECAPTCHA_V3_SITE_KEY}>
      <PageContextProvider {...props}>{element}</PageContextProvider>
    </GoogleReCaptchaProvider>
  </main>
)

And some of my components using Recaptcha V3:

const MyComponent = ({ data, ...props }) => {
  const { executeRecaptcha } = useGoogleReCaptcha()

  const verifyRecaptcha = useCallback(async () => {
    if (!executeRecaptcha) {
      console.log("Execute recaptcha not yet available")
      return
    }
    return await executeRecaptcha("")
  }, [executeRecaptcha])

  useEffect(() => {
    verifyRecaptcha()
  }, [verifyRecaptcha])

  return <div><button onClick={async ()=>{
   const recaptcha_token = await verifyRecaptcha()
   // Do something..
  }}></button></div>
}

It works great, but the problem is that the Recaptcha script is getting loaded several times:

Does somebody know how to prevent this issue?

Using:

• node = v18.15.0
• Gatsby = v5.13.7
• react-google-recaptcha-v3 = v1.10.1