"TypeError: app.auth is not a function" when using PhoneAuthProvider

import {useEffect} from "react";
import {initializeApp} from "firebase/app";
import {getAuth, PhoneAuthProvider} from "firebase/auth";
import * as firebaseui from 'firebaseui'
import 'firebaseui/dist/firebaseui.css'

function App() {
    const firebaseConfig = {
        ...
    };
    const app = initializeApp(firebaseConfig);

    const uiConfig = {
        signInSuccessUrl: '<url-to-redirect-to-on-success>',
        signInOptions: [
            PhoneAuthProvider.PROVIDER_ID
        ],
        tosUrl: () => alert('Terms of service'),
        privacyPolicyUrl: () => alert('Privacy policy')
    };

    // SOURCE: https://github.com/firebase/firebaseui-web/issues/216#issuecomment-459302414
    const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(getAuth());
    useEffect(() => {
        ui.start('#firebaseui-auth-container', uiConfig);
    }, []);

    return (
        <div className="App">
            <div id="firebaseui-auth-container"/>
        </div>
    );
}

export default App;

My project is React and when I run this code, I get this error TypeError: app.auth is not a function. This only happens when I use PhoneAuthProvider.PROVIDER_ID, when I insert GoogleAuthProvider.PROVIDER_ID everything works fine. I tried with multiple devices and environments and I always get the same error. Does my code have any mistakes? Thanks in advance.

[xil222]

@wonsuc I think that would be one of the top priorities.

[xil222]

can you try

import {PhoneAuthProvider} from "firebase/compat/auth"; 
import {initializeApp} from "firebase/compat/app";

using compat library would change the import style see here