Invisible Recaptcha preventing form submission

[rohanchkrabrty]

I am trying out phone number authentication with invisible re-captcha.

I have a simple form as below

const loginButtonRef = useRef();
const loginValueRef = useRef();

<form
  onSubmit={e => {
    e.preventDefault();
    loginHandler();
  }}
  style={{ display: "flex", flexDirection: "column" }}
>
  <input type="tel" placeholder="Mobile number" ref={loginValueRef} />
  <button ref={loginButtonRef} type="submit">
    Continue
  </button>
</form>

I am initializing the invisible recaptcha at component mount

useEffect(() => {
window.recaptchaVerifier = new RecaptchaVerifier(
        loginButtonRef.current,
        {
          size: "invisible",
          callback: response => {
            console.log("Recaptcha Verified");
          },
          "expired-callback": () => {
            console.log("Recaptcha Expired");
          },
          "error-callback": error => {
            console.log("Recaptcha Error");
          },
        },
        firebaseAuth
      );
  }, []);

The following is the form submission function (loginHandler)

const loginHandler = () => {
console.log(loginValueRef.current.value);

signInWithPhoneNumber(firebaseAuth, loginValueRef.current.value, window.recaptchaVerifier)
  .then(confirmationResult => {
    window.confirmationResult = confirmationResult;
    console.log("otp sent");
  })
  .catch(error => {
    // resetRecaptcha();
    console.log(error.code, error.message);
  });
};

Now, If I provide a valid input everything works and the OTP is sent

But the problem I am facing is for the below flow

1. deliberately provide a wrong input
2. Recaptcha gets verified
3. firebase throws an error, example- auth/invalid-phone-number
4. Change input and press button
5. Recaptcha gets verified but the form submission doesn't work

I tried to reset the captcha following the doc but 'grecaptcha' is not defined.

Can anyone guide me on how to handle the error / reset recaptcha.