I have issue with firebaseui after update my project, this is my current code:

import { AngularFireAuth } from '@angular/fire/compat/auth';
import firebase from 'firebase/compat/app';
import * as firebaseui from 'firebaseui';

import PhoneAuthProvider = firebase.auth.PhoneAuthProvider;
import GoogleAuthProvider = firebase.auth.GoogleAuthProvider;


export class SigninComponent implements OnInit, OnDestroy {

  ui!: firebaseui.auth.AuthUI;

  constructor(
    private afAuth: AngularFireAuth,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.afAuth.app.then(app => {
      const uiConfig: firebaseui.auth.Config = {
        signInOptions: [
          PhoneAuthProvider.PROVIDER_ID,
          GoogleAuthProvider.PROVIDER_ID,
        ],
        callbacks: {
          signInSuccessWithAuthResult: this.onSuccessLogIn.bind(this)
        }
      }

      this.ui = new firebaseui.auth.AuthUI(app.auth());

      this.ui.start('#firebaseui-auth-container', uiConfig);

      // this.ui.disableAutoSignIn();
    })
  }

I got this Error:

./node_modules/firebaseui/dist/esm.js:347:22-60 - Error: export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel)

I try to search and use any idea to figure out what is wrong but nothing working...

any Ideas ?!