error is showing using invisible recaptch in localhost

error:
recaptcha_verifier.ts:114 Uncaught TypeError: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting')
at new RecaptchaVerifier (recaptcha_verifier.ts:114:1)
at otpform.js:17:1
at commitHookEffectListMount (react-dom.development.js:23189:1)
at commitPassiveMountOnFiber (react-dom.development.js:24965:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24930:1)
at commitPassiveMountEffects_begin (react-dom.development.js:24917:1)
at commitPassiveMountEffects (react-dom.development.js:24905:1)
at flushPassiveEffectsImpl (react-dom.development.js:27078:1)
at flushPassiveEffects (react-dom.development.js:27023:1)
at react-dom.development.js:26808:1
my code
useEffect(() => {
// Set up the ReCAPTCHA verifier when the component mounts
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
'size': 'normal',
'callback': (response) => {
// ReCAPTCHA solved, allow OTP sending
handleSendOtp();
}
}, auth);
}, [auth]);

const handleSendOtp = () => {
const appVerifier = window.recaptchaVerifier;

signInWithPhoneNumber(auth, phoneNumber, appVerifier)
.then((confirmationResult) => {
// SMS sent. Save the confirmation result for later verification.
setVerificationId(confirmationResult.verificationId);
setIsOtpSent(true);
})
.catch((error) => {
console.error("Error during sign-in with phone number:", error);
// Handle error, e.g., show a message to the user
});
};