Firebase OTP Authentication error in reCaptcha

import React, { useState, useRef } from "react";
import firebase from "../firebase";

const Auth = () => {

    const [phoneNumber,setPhoneNumber] = useState('');
    const [verificationID, setVerificationID] = useState('');
    const recaptchaRef = useRef(null);
  
    const handleSendOtp = ()=>{

        if(recaptchaRef.current){
            recaptchaRef.current.innerHTML = `<div id="recaptcha-container"></div>`
        }

        const verifier = new firebase.auth.RecaptchaVerifier('recaptcha-container',{
            size:'invisible'
        });

        firebase.auth().signInWithPhoneNumber(phoneNumber,verifier)
        .then(confirmationResult => {
            setVerificationID(confirmationResult.verificationId);
        })
        .catch(error => {
            console.log('Error sending OTP:',error);
        })
    }

    return(
        <div>
            <h1>Phone OTP Authentication</h1>
            <div ref={recaptchaRef}></div>
            <input 
            type="tel" 
            placeholder="+91 9999999999"
            value={phoneNumber}
            onChange={e => setPhoneNumber(e.target.value)}
            />

            <button onClick={handleSendOtp}>Send OTP</button>
        </div>
    );
};

export default Auth;

I am using firebase for my React JS web project

whenever I hit the send OTP request i am getting this error

Error sending OTP: FirebaseError: Firebase: The phone verification request contains an invalid application verifier. The reCAPTCHA token response is either invalid or expired. (auth/invalid-app-credential).

I cant figure this out, even ChatGPT is not able to help me