Invisible captcha badge not rendering again after just unmounting

react-google-recaptcha version: 2.0.1

export const ReCaptcha = memo(function Recaptcha({ onChange }) {
  const recaptchaRef = useRef();

  function handleError(err) {
    console.log("Error in recaptcha", err);
  }

  return (
    <ReCAPTCHA
      ref={recaptchaRef}
      sitekey={RECAPTCHA_SITE_KEY}
      size="invisible"
      badge="bottomright"
      onChange={onChange}
      onErrored={handleError}
    />
  );
});

Here is my wrapper on recaptcha. I render this inside a div and the content inside the div unmounts and mounts on a certain user action.

Issue is if the content inside mounted immediately after unmounting, then invisible captcha works fine but the badge doesnt render, rather it is hidden and renders inline but hidden. But if it is mounted after 5-6 seconds after unmounting, then it renders at bottomright of div.

What i have tried:

useEffect(()=>{
   setTimeout(() => {window.grecaptcha.reset();}, 1000)
}, [])

If i run from browser console window, it resets and captcha is rendered agains, but doing it on mount is not working.

Any help would be much appreciated.

[davidebot]

Hello everybody! Does anyone found a fix to this issue?

[UseMuse]

@cw-amitsingh ХО-amitsingh it helped me

 function onChange(value) {
        //custom fetch and at the end do a reset
       if (recaptchaRef && recaptchaRef.current && recaptchaRef.current.reset) {
            recaptchaRef.current.reset()
        }
  }