React Firebase Multi-factor Authentication RecaptchaVerifier Error

Question

I am currently trying to enable 2FA login for my users in my React App. However, I keep facing an error with RecaptchaVerifier, specifically this error:

Argument of type 'string' is not assignable to parameter of type 'Auth'.

This is my code for reference:

`import React, { useState, useEffect } from "react";
import {
  getAuth,
  PhoneAuthProvider,
  RecaptchaVerifier,
  PhoneMultiFactorGenerator,
  MultiFactorResolver,
  PhoneMultiFactorInfo,
} from "firebase/auth";
import { useNavigate } from "react-router-dom";
import { auth } from "../../../firebase";

const LoginMFA = () => {
  const [otp, setOtp] = useState("");
  const navigate = useNavigate();
  const [resolver, setResolver] = useState<MultiFactorResolver | null>(null);

  useEffect(() => {
    const storedResolver = sessionStorage.getItem("resolver");
    if (storedResolver) {
      setResolver(JSON.parse(storedResolver));
    }
  }, []);

  useEffect(() => {
    if (resolver) {
      // Add a delay before initializing reCAPTCHA
      const timer = setTimeout(() => {
        // Initialize the reCAPTCHA verifier
        window.recaptchaVerifier = new RecaptchaVerifier(
          "recaptcha-container",
          {
            size: "invisible",
            callback: () => {
              // reCAPTCHA solved, allow the user to proceed
            },
          },
          auth
        );

        // Send the OTP
        const sendOtp = async () => {
          try {
            const phoneAuthProvider = new PhoneAuthProvider(auth);
            const hint = resolver.hints[0] as PhoneMultiFactorInfo;
            await phoneAuthProvider.verifyPhoneNumber(hint, window.recaptchaVerifier);
          } catch (error) {
            console.error("Error sending OTP", error);
          }
        };

        sendOtp();
      }, 3000); // 3-second delay

      // Cleanup the timer if the component unmounts
      return () => clearTimeout(timer);
    }
  }, [resolver]);

  const handleOtpSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!resolver) return;

    try {
      const phoneAuthProvider = new PhoneAuthProvider(auth);
      // Send the OTP to the user's phone number
      const verificationId = await phoneAuthProvider.verifyPhoneNumber(
        resolver.hints[0].uid,
        window.recaptchaVerifier // Use .uid to get the phone number hint
      );

      const phoneCredential = PhoneAuthProvider.credential(verificationId, otp);
      const multiFactorAssertion =
        PhoneMultiFactorGenerator.assertion(phoneCredential);
      await resolver.resolveSignIn(multiFactorAssertion);

      // Clear the resolver from session storage
      sessionStorage.removeItem("resolver");

      // Redirect to Projects page
      navigate("/admin/projects");
    } catch (error) {
      console.error("MFA failed", error);
      // Handle MFA errors here
    }
  };

  return (
    <div>
      <h2>Multi-Factor Authentication</h2>
      <form onSubmit={handleOtpSubmit}>
        <div id="recaptcha-container"  ></div>
        <input
          type="text"
          value={otp}
          onChange={(e) => setOtp(e.target.value)}
          placeholder="Enter OTP"
          required
        />
        <button type="submit">Verify</button>
      </form>
    </div>
  );
};

export default LoginMFA;`

I have tried changing the name "recaptcha-container" to other names, and have tried searching online to no avail.