Firebase otp recaptcha error: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting')

I am using firebase to generate otp and i am getting an error about appVerificationDisabledForTesting being undefined.

recaptcha_verifier.ts:114 Uncaught TypeError: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting')
    at new RecaptchaVerifier (recaptcha_verifier.ts:114:1)
    at generateRecaptcha (Home.js:123:1)
    at handleSend (Home.js:139:1)

here is the code i am using

const handleSend = (event) => {
    event.preventDefault();

    generateRecaptcha();
    let appVerifier = window.recaptchaVerifier;
    signInWithPhoneNumber(auth, phoneNumber, appVerifier)
      .then((confirmationResult) => {
        // SMS sent. Prompt user to type the code from the message, then sign the
        // user in with confirmationResult.confirm(code).
        window.confirmationResult = confirmationResult;
      })
      .catch((error) => {
        // Error; SMS not sent
        console.log(error);
      });
  };

the error is coming from generateRecaptcha();

const generateRecaptcha = () => {
    window.recaptchaVerifier = new RecaptchaVerifier(
      "recaptcha",
      {
        size: "invisible",
        callback: (response) => {
          // reCAPTCHA solved, allow signInWithPhoneNumber.
          // ...
        },
      },
      auth
    );
  };