Error: Missing required parameters: sitekey in firebase recaptcha in multifactor authentication

Question

I'm trying to implementing a MFA system in firebase and I'm constantly running into the issue "Missing required parameters: sitekey". I have entered the sitekey in my firebase config.js file. As per the documentation provided by the firebase for the MFA we need to first signin using email and password which is handled by the function handleSubmit(), then for the MFA it should provide an error "auth/multi-factor-auth-required" so in the catch(error) we now implement the furthur code as per the documentation and in my function handleSubmit the code is running properly till the line where I 'console.log("Recaptcha callback")'. After this I'm constantly getting the error missing sitekey.

  function onCaptchaVerify(callback) {
    if (!window.RecaptchaVerifier) {
      window.recaptchaVerifier = new RecaptchaVerifier(
        recaptchRef,
        {
          size: "invisible",
          callback: (response) => {
            // handleSubmit();
          },
          "expired-callback": () => {},
        },
        auth
      );
      window.recaptchaVerifier.render();
    }
  }

const onOTPVerify = (e) => {
    // e.preventDefault();

    // onCaptchaVerify(() => {
      const cred = PhoneAuthProvider.credential(verificationId, otp);
      console.log(cred);
      const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
      console.log(multiFactorAssertion);
      resolver.resolveSignIn(multiFactorAssertion).then((r) => {
        console.log(r);
      // });
    });
  };

const handleSubmit = (e) => {
    setLoading(false);
    // e.preventDefault();
    const { email, password } = e.target.elements;

    firebaseConfig
      .auth()
      .signInWithEmailAndPassword(email.value, password.value)
      .then((userCredential) => {
        setRedirectToError(false);
        console.log(email.value);
      })
      .catch((error) => {
        // Handle authentication error
        if (error.code === "auth/multi-factor-auth-required") {
          const _resolver = getMultiFactorResolver(auth, error);
          console.log("set resolver", _resolver);
          setResolver(_resolver);
          onCaptchaVerify();

          const phoneInfoOptions = {
            multiFactorHint: _resolver.hints[0],
            session: _resolver.session,
          };
          console.log("Hi1");
          console.log(phoneInfoOptions);
          console.log("Hi2");
            
            const phoneAuthProvider = new PhoneAuthProvider(auth);
            // onCaptchaVerify(() => {
              console.log("Recaptcha callback");
            phoneAuthProvider
              .verifyPhoneNumber(phoneInfoOptions, {verify: window.recaptchaVerifier})
              .then(function (verificationId) {
                console.log("verificationID", verificationId);
                setVerificationId(verificationId);
              });
          // });

          // onOTPVerify();
          // Set the error message state
        } else if (error.code === "auth/wrong-password") {
          console.error(error);
          setRedirectToError(true); // Set the redirect state to true
          setError(error.message);
        }
      });
  };

I tried various methods given in the documentation. We even tried using ReCaptchaVerifierV3 but still didn't get the results.