Problem with captcha and firebase authentication

Question

I have sign in/up pages, written on react. All information is saved in realtime database from firebase.

Also on sign in page I have captcha and authentication by phone number. When I click on button "sign in", i have this error:

ERROR Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') TypeError: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') at new RecaptchaVerifier (http://localhost:3000/static/js/bundle.js:10640:48) at sendConfirmationCode (http://localhost:3000/static/js/bundle.js:1254:31) at http://localhost:3000/static/js/bundle.js:1278:9 My code: SignIn.jsx:

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { getAuth, signInWithPhoneNumber, RecaptchaVerifier } from "firebase/auth";
import { getDatabase, ref, get } from "firebase/database";
import ReCAPTCHA from "react-google-recaptcha";
import { app, db, auth } from '../../firebase';
import './login.css';

const SignIn = () => {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [captchaValue, setCaptchaValue] = useState(null);
  const [code, setCode] = useState('');
  const [confirmationResult, setConfirmationResult] = useState(null);
  const [showConfirmation, setShowConfirmation] = useState(false);
  const db = getDatabase();
  const usersRef = ref(db, 'users');
  const navigate = useNavigate();
  const auth = getAuth();

  const handleCaptchaResponse = (value) => {
    setCaptchaValue(value);
  };

  const sendConfirmationCode = async () => {
    console.log(1)
    const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {}, auth);
    console.log(2 )
    const result = await signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier);
    setConfirmationResult(result);
    setShowConfirmation(true);
  };

  const confirmCode = async () => {
    try {
      const result = await confirmationResult.confirm(code);
      navigate('/bot-game');
    } catch (error) {
      console.log(error);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!captchaValue) {
      alert('Пожалуйста, подтвердите, что вы не робот');
      return;
    }
    get(usersRef).then((snapshot) => {
      const users = snapshot.val() || {};
      const user = users[name];
      if (user && user.password === password) {
        sendConfirmationCode();
      } else {
        alert('Неверное имя пользователя или пароль');
      }
    });
  };

  const handleSignUp = (e) => {
    e.preventDefault();
    navigate('/sign-up');
  };

  useEffect(() => {
    if (showConfirmation) {
      sendConfirmationCode();
    }
  }, [showConfirmation]);

  return (
    <div className='login'>
      <h1 className='login_head'>Sign in</h1>
      <form className='login_form' onSubmit={handleSubmit}>
        <div className="validate-input">
          <input type="text" className="main-input" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)}/>
          <span className="focus-main-input"></span>
        </div>
        <div className="validate-input">
          <input type="password" className="main-input" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)}/>
          <span className="focus-main-input"></span>
        </div>
        <button className='login_button'><p>Sign in</p></button>
      </form>
      <div className='captcha'>
        <ReCAPTCHA 
          sitekey="6Le9FikpAAAAAPJNSzwpM7QnCluSKbrjqGN7_1YE" 
          onChange={handleCaptchaResponse}  
          theme="dark"
          size="normal"
        />
        </div>
      <div className='login_link'>
        <p>Dont have an account?</p> <a className='link' onClick={handleSignUp}> Sign up</a>
      </div>
      {showConfirmation && (
        <form className='code_form' onSubmit={confirmCode}>
          <div className="validate-input">
            <input type="text" className="main-input" placeholder="Enter confirmation code" onChange={(e) => setCode(e.target.value)} />
            <span className="focus-main-input"></span>
          </div>
          <button className='login_button'><p>Confirm Code</p></button>
        </form>
      )}
    </div>
  );
};

export default SignIn;

SignUp.jsx:

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { app } from '../../firebase';
import { getDatabase, ref, get, set } from "firebase/database";
import './login.css';

const SignUp = () => {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  const [phone, setPhone] = useState('');
  const db = getDatabase(app);
  const usersRef = ref(db, 'users');
  const navigate = useNavigate();    

  const handleSubmit = async (e) => {
    e.preventDefault();
    get(usersRef).then((snapshot) => {
      const users = snapshot.val() || {};
      if (users[name]) {
        alert('Имя пользователя уже зарегистрировано');
        return;
      }
      if (name.length > 10 || password.length > 15) {
        alert('Имя должно быть не более 10 символов, а пароль не более 15');
        return;
      }
      if (name === '' || password === '' || phone === '') {
        alert('Поля обязательно должны быть не пустыми');
        return;
      }
      users[name] = { password, phone, score: { user: 0, bot: 0 } };
      set(usersRef, users);
      navigate('/sign-in');
    });
  };

  return (
    <div className='login'>
      <h1 className='login_head'>Sign up</h1>
      <form className='login_form' onSubmit={handleSubmit}>
        <div className="validate-input">
          <input type="text" className="main-input" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
          <span className="focus-main-input"></span>
        </div>
        <div className="validate-input">
          <input type="password" className="main-input" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
          <span className="focus-main-input"></span>
        </div>
        <div className="validate-input">
          <input type="tel" className="main-input" placeholder="Phone" value={phone} onChange={(e) => setPhone(e.target.value)} />
          <span className="focus-main-input"></span>
        </div>
        <button className='login_button'><p>Sign up</p></button>
      </form>
    </div>
  );
};

export default SignUp;

I google it, ask bing, bard, nothing helped. My firebase config is correct, on firebase console is all correct, i just don't know, what to do