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