I'm trying to build a simple app that allows sign in using phone number, but it appears to do absolutely nothing when I click the button that calls "setupCaptcha".

The line: import firebase from '../firebase' (line 5) does absolutely nothing (it is not being referenced anywhere in the code), but when I comment it out it gives me this error: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app). when I uncomment it, the button click does absolutely nothing.

import React from 'react'
import { useHistory } from 'react-router-dom'
import { MainButton } from '../components/MainButton'
import { MainInput } from '../components/MainInput'
import firebase from '../firebase'


// import { getAuth, RecaptchaVerifier, signinWithPhoneNumber } from "firebase/auth";
import { getAuth, RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";



export default function EnterPhoneNumber() {
    const history = useHistory();

    // const phoneNumber = getPhoneNumberFromUserInput();
    

    function setupCaptcha() {
        const auth = getAuth();
        window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
            'size': 'invisible',
            'callback': (response) => {
                // reCAPTCHA solved, allow signInWithPhoneNumber.
                // onSignInSubmit();
                onSignInSubmit()
            }
        }, auth);
    }

    function onSignInSubmit() {
        const auth = getAuth();
        const appVerifier = window.recaptchaVerifier;
        signInWithPhoneNumber(auth, "+447xxxxxxxxx", appVerifier)
            .then((confirmationResult) => {
                // SMS sent. Prompt user to type the code from the message, then sign the
                // user in with confirmationResult.confirm(code).
                window.confirmationResult = confirmationResult;
                // ...
            }).catch((error) => {
                // Error; SMS not sent
                // ...
            });
    }

This is my firebase.js file:

import firebase from 'firebase/compat/app'
// import 'firebase/compat/auth'

const app = firebase.initializeApp({
    apiKey: "xxxxxxx",
    authDomain: "xxxxxx.firebaseapp.com",
    projectId: "xxxxxx",
    storageBucket: "xxxxxxxx.appspot.com",
    messagingSenderId: "xxxxxxxx",
    appId: "xxxxxxxxxx"
})

// export const auth = app.auth(); 

export default firebase;