Why can't read propert 'app' in firebase.app()?

I am trying to use expo firebase phone authentication, after I set up firebase.js , I just simply use firebase recaptcha modal. However the console can't read firebase.app(), Is there something wrong or something are missing??

TypeError: Cannot read property 'apps' of undefined
RegisterPage
C:/Users/kkcookery/Desktop/signal-clone/RegisterPage.js:14
  11 |  const [verificationId, setVerificationId] = React.useState()
  12 |  const [verificationCode, setVerificationCode] = React.useState()
  13 |  const recaptchaVerifier = React.useRef(null)
> 14 |  const firebaseConfig = firebase.apps.length ? firebase.app().options : undefined
     | ^  15 | 
  16 |  const SendCode = async() => {
  17 |    try {

here is my code in expo connect to firebase:

import * as React from 'react'
import { StyleSheet, Text, View, TextInput, KeyboardAvoidingView } from 'react-native'
import { Button } from 'react-native-elements'
import { firebase } from './firebase'
import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha'


function RegisterPage({ navigation }) {

  const [phoneNumber, setPhoneNumber] = React.useState()
  const [verificationId, setVerificationId] = React.useState()
  const [verificationCode, setVerificationCode] = React.useState()
  const recaptchaVerifier = React.useRef(null)
  const firebaseConfig = firebase.apps.length ? firebase.app().options : undefined

  const SendCode = async() => {
    try {
      const phoneProvider = new firebase.auth.PhoneAuthProvider()
      const verificationId = await phoneProvider.verifyPhoneNumber(
        phoneNumber,
        recaptchaVerifier.current
      )
      setVerificationId(verificationId)
    }catch (err) {console.error(err)}


  }




    return(
    <KeyboardAvoidingView>
     <View style={styles.container}>
      <FirebaseRecaptchaVerifierModal
        ref={recaptchaVerifier}
        firebaseConfig={firebaseConfig}
        //attemptInvisibleVerification={attemptInvisibleVerification}
      />
      <View style={{marginBottom:30,marginTop:50,width:'30%'}}>
       <Text>Please enter your phone number</Text>
      </View>
      <View style={{marginBottom:10,width:"60%"}}>
       <TextInput 
        placeholder="+852 your phone number"
        placeholderTextColor="#636363"
        onChangeText={text => setPhoneNumber(text)}
        autoFocus
        autoCompleteType="tel"
        keyboardType="phone-pad"
        textContentType="telephoneNumber"
        value={phoneNumber}
        style={styles.input}
       />
      </View>
      <View>
        <Button
          title="Send Verification Code"
          onPress={SendCode}
        />
      </View>
     </View>
    </KeyboardAvoidingView>
    )



}

Here is my firebase.js:

import * as firebase from 'firebase';

// Optionally import the services that you want to use
import '@firebase/auth';
//import "firebase/database";
import "@firebase/firestore";
//import "firebase/functions";
//import "firebase/storage";

// Initialize Firebase
const firebaseConfig = {
  apiKey: 'AIzXXXXXXXXX',
  authDomain: 'XXX.firebaseapp.com',
  databaseURL: 'https://XXX.firebaseio.com',
  projectId: 'XXX',
  storageBucket: 'XXX.appspot.com',
  messagingSenderId: 'XXXXXXXX',
  appId: 'XXXXXXXX',
};




if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

export default {firebase,firebaseConfig}

why cannot read firebase.app()?