"What could be causing the error 'RecaptchaVerifier instance has been destroyed' in Firebase OTP verification in Next.js and how can it be resolved?"

Question

I am encountering this error after successfully creating user, as soon as i revisit signIn form for new account without reloading page and try to send otp to any phone number.

Here is my code implementation: `

const verifyPhoneNumber = async () => {
    setVerifyNumberLoader(true);
    if (otpInfo.otpVerified) return;
    try {
      if (!window.recaptchaVerifier) {
        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
          "recaptcha-container",
          {
            size: "invisible",
          },
        );
      }
      window.recaptchaVerifier.render();
      const appVerifier = window.recaptchaVerifier;
      const result = await firebase
        .auth()
        .signInWithPhoneNumber('+' + state.phone, appVerifier);
      if (result) {
        setTimeLeft(60);
        setIsDisabled(false)
        toast.success('OTP sent to your phone number');
        openModalHandler();
        setOtpInfo((prev: any) => ({ ...prev, confirmResult: result }));
      }
    } catch (error) {
      console.log(error)
      toast.error(error.message);
      setVerifyNumberLoader(false);
    } finally {
      window.recaptchaVerifier.reset();
      setVerifyNumberLoader(false);
    }
  };

This is the submit handler for otp submit

const handleSubmit = async (otp: any) => {
    try {
      setLoading(true);
      if (otp) {
        const confirmOtp = await otpInfo.confirmResult.confirm(otp);
        if (confirmOtp) {
          toast.success('Phone number verified successfully!');
          setOtpInfo((prev: any) => ({ ...prev, otpVerified: true }));
          window.recaptchaVerifier.clear();
          closeModalHandler();
        }
      } else {
        toast.error('Invalid OTP');
      }
    } catch (error) {
      toast.error('Invalid OTP please try again');
    } finally {
      setLoading(false);
    }
  };

Handle Submit for form submit

const onFormSubmit = (e: { preventDefault: () => void }) => {
    e.preventDefault();

    if (validateForm()) {
      if (!otpInfo.otpVerified) {
        return toast.error('Verify your phone number!');
      }
      const { fullName, email, password, phone } = state;
      const packet = {
        name: fullName,
        email,
        password,
        phone: '+' + parseInt(phone),
        role: props.isCandidate ? 'candidate' : 'company',
      };
      dispatch(register(packet));
    }
  };

I should be able to send otp without any errors like this. I already tried lot of stackover flow solutions none of them worked. In one of them i got one more error "recaptch client element has been removed: 0" later fix that withwindow.recaptchaVerifier.reset();

Hope i will get solution to this problem.