GoogleReCaptchaProvider Incurs Promise Error If Only Applied In Specific Page and Not Entire App

[herzadinata]

So I have built a website using nextjs 13.1.1 and react-google-recaptcha-v3 1.10.1.

First I put the Provider in the _app.tsx file like this

export default function App({ Component, pageProps }: ItfPropsApp) {
  return (
          <GoogleReCaptchaProvider
            reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || ""}
            scriptProps={{
              async: false,
              defer: false,
              appendTo: "head",
              nonce: undefined,
            }}
          >
                  <Component {...pageProps} />
          </GoogleReCaptchaProvider>

  );
}

If I include GoogleReCaptchaProvider globally, everything works fine.
However, since reCAPTCHA is only needed on the contact page, I decided to limit its scope to just that page.
This approach helps to reduce unused JavaScript and improve the Google Chrome Lighthouse score for the other pages.

So I moved GoogleReCaptchaProvider from _app.tsx to only Contact page component

function Contact(props: Props) {
  return (
    <GoogleReCaptchaProvider
      reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || ""}
      scriptProps={{
        async: false,
        defer: false,
        appendTo: "head",
        nonce: undefined,
      }}
    >
      <Container {...props} />
    </GoogleReCaptchaProvider>
  );
}

export default Contact;

But then that's causing error of promise.
If I open / visit contact page, then go to any other page, it will show error like this in console

anchor:1 Uncaught (in promise) TypeError
Promise.then (async)
t @ recaptcha__en.js:147
Promise.then (async)
t @ recaptcha__en.js:147
(anonymous) @ recaptcha__en.js:147
(anonymous) @ recaptcha__en.js:147
(anonymous) @ recaptcha__en.js:76
hM.C @ recaptcha__en.js:935
Z @ recaptcha__en.js:930
(anonymous) @ recaptcha__en.js:938
H @ recaptcha__en.js:416

Meanwhile the error in sentry caught this error

app:///recaptcha/releases/DH3nyJMamEclyfe-nztbfV8S/recaptcha__en.js in Array.<anonymous> at line 529:315
TypeError: Cannot read properties of undefined (reading 'logging')

[SylvainGibert]

I'm still having the same problematic, any updates ?