Firebase – ' TypeError: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') '

i’m trying to implement the OTP authentication with firebase with phone number in react+vite. i’m getting this error:
‘ TypeError: Cannot read properties of undefined (reading ‘appVerificationDisabledForTesting’) ‘

this is how i implemented in my code

// firebaseConfig.jsx file

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp)

export { firebaseApp, auth };

// signup.jsx component page

import { auth } from '../../../../firebaseConfig/firebaseConfig';
import { RecaptchaVerifier, signInWithPhoneNumber } from 'firebase/auth';

const [formValues, SetValues] = useState({
        name: '',
        email: '',
        phone: '',
        password: '',
        confirmPassword: ''
    })

const [confirmationResult, setConfirmationResult] = useState(null)

const handleSendOtp = async () => {
        try {
            const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
                size: 'invisible',
                callback: () => {
                    console.log('recaptcha resolved..')
                }
            }, auth)
            signInWithPhoneNumber(formValues.phone, recaptchaVerifier).then((result) => {
                setConfirmationResult(result);
                alert("code sent")
                setshow(true);
            })
                .catch((err) => {
                    alert(err);
                    window.location.reload()
                });
         
        } catch (error) {
            flag = false
            console.log('error sending otp ' + error)
        }
    }

and i give the recaptcha-container div like this:

return(
<>
<div id='recaptcha-container'></div>

*//and here,im conditionally rendering the component based on the state 'confirmationResult'
*
{confirmationResult===null?(<component1.....lines>):(<component2.....lines>)}
</>
)

anybody can help me to find the issue?

i checked for is anything wrong with my importing and exporting statements, initializing the firebase application and i referred several documents but i couldn’t find the issue what it is. is there any problem with ‘recaptchaVerifier’? or setting the div for ‘recaptcha-container’.