Why does reCaptcha disappear when I navigate to another page?

Question

if I want to load the captcha by clicking refresh button its loading, but when we navigate to another page and clicking browser back button then captcha is going to disappear. How to resolve that problem that every time (either you refresh or clicking from browser back button) captcha should shown

import React, { useState } from "react";
import Recaptcha from "react-recaptcha";
export default function DropDown() {
  const grecaptchaObject = window.grecaptcha;
  function captchaVerify(response) {
    if (response !== "") {
      //some code
    } else if ((response === "")) {
      //some code 
    }
  }
  function recaptchaLoaded() {
  }
  return (
    <>
      <div>
        <Recaptcha
          sitekey="Your-Site-Key"
          render="explicit"
          onloadCallback={recaptchaLoaded}
          verifyCallback={captchaVerify}
          grecaptcha={grecaptchaObject}
        />
      </div>
    </>
  );
}

Answer 1

Try to disabling the <React.StrictMode> in index.js like this:

const root = createRoot(container);
root.render(
 // <React.StrictMode>
    <App />
 // </React.StrictMode>
);

Answer 2

You have to use the reset method. From the docs:

Explicitly reset the reCAPTCHA widget

The reCAPTCHA widget can be manually reset by accessing the component instance via a callback ref and calling .reset() on the instance.

var Recaptcha = require('react-recaptcha');
 
// create a variable to store the component instance
let recaptchaInstance;
 
// create a reset function
const resetRecaptcha = () => {
  recaptchaInstance.reset();  
};
 
ReactDOM.render(
  <div>
    <Recaptcha
      ref={e => recaptchaInstance = e}
      sitekey="xxxxxxxxxxxxxxxxxxxx"
    />
    <button
      onClick={resetRecaptcha}
    >
     Reset
    </button>
  </div>,
  document.getElementById('example')
);

To get this to work on each load, you can take advantage of the useEffect hook:

useEffect(() => {
  recaptchaInstance.reset();
, []);