Getting error while using firebase authentication in react native project

I am trying to use firebase authentication in my react native project. But it is showing error –

 ERROR  ReferenceError: Property 'auth' doesn't exist, js engine: hermes

When we click on sign up button in sign up screen it should register a user but it is showing error. SignupScreen.js file is like this –

import { View, Text, StyleSheet, Image, TouchableOpacity, TextInput, KeyboardAvoidingView } from 'react-native'
import React, { useState } from 'react'

export default function SignupScreen({navigation}) {
  const [email,setEmail]=useState('')
  const [password,setPassword]=useState('')

  const handleSignUp=()=>{
    auth
    .createUserWithEmailAndPassword(email,password)
    .then(userCredentials=>{
      const user =userCredentials.user;
      console.log(user.email)
    })
    .catch(error=>
      alert(error.message)
    )
  }
  return (
    <KeyboardAvoidingView style={styles.container} behavior='padding'>
      <Text style={styles.text}>Create An Account</Text>
      <Image source={require('../assets/signup.png')} style={styles.img}/>
      <Text style={styles.label}>Name</Text>
      <TextInput placeholder='Enter Your Name' 
      style={styles.input}
      />
      <Text style={styles.label}>Email</Text>
      <TextInput placeholder='Enter Your Email' 
      style={styles.input}
      value={email}
      onChangeText={value=> setEmail(value)}/>
      <Text style={styles.label}>Username</Text>
      <TextInput placeholder='Enter a Unique username' 
      style={styles.input}
      />
      <Text style={styles.label}>Password</Text>
      <TextInput placeholder='Create Password' 
      style={styles.input}
      value={password}
      secureTextEntry
      onChangeText={value=> setPassword(value)}/>
      <TouchableOpacity style={styles.btn} onPress={handleSignUp}>
        <Text style={styles.btnText}>Sign Up</Text>
      </TouchableOpacity>
      <View style={styles.btn2}>
      <Text style={{color:"white"}}>Already a User?</Text>
      <TouchableOpacity onPress={()=>navigation.navigate("LoginScreen")}>
        <Text style={styles.logText}>Log In</Text>
      </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  )
}

const styles=StyleSheet.create({
  container:{
    backgroundColor:"#8FA6CB",
    flex:1,
    padding:30,
    justifyContent:"center",
},
text:{
    fontSize:30,
    color:"white",
    fontFamily:"serif",
    fontWeight:"bold",
    textAlign:"center"
},
img:{
    width:340,
    height:250,
    alignSelf:"center"
},
btn:{
    backgroundColor:"#AF2664",
    paddingHorizontal:20,
    paddingVertical:10,
    width:"100%",
    borderRadius:8,
    marginTop:25
},
btnText:{
    color:"white",
    alignSelf:"center",
    fontSize:18,
},
btn2:{
  flexDirection:"row",
  gap:10,
  alignSelf:"center",
  marginTop:10
},
logText:{
  color:"#AF2664"
},
input:{
  borderWidth:1,
  borderRadius:8,
  width:"100%",
  paddingVertical:10,
  paddingHorizontal:15,
  fontSize:17,
  color:"white",
  borderColor:"white",
  marginBottom:10
},
label:{
  color:"white",
  fontSize:19,
  marginBottom:5
}
})

firebase.js file –

import *as firebase from "firebase/app";
const firebaseConfig = {
  apiKey: "AIzaSyAbKgCge94KVTyv7SMyIx3kAu1BkJXBn5I",
  authDomain: "fir-auth-d2499.firebaseapp.com",
  projectId: "fir-auth-d2499",
  storageBucket: "fir-auth-d2499.appspot.com",
  messagingSenderId: "580829064333",
  appId: "1:580829064333:web:10f3dbd97070935f5806c4",
  measurementId: "G-0WLRSQLJKX"
};

// Initialize Firebase
let app;
if(firebase.apps.length === 0){
    app=firebase.initializeApp(firebaseConfig);
}else{
    app=firebase.app();
}
const auth=firebase.auth();
export {auth};

I don’t know why it is giving error. I am trying it for the first time by following a youtube video and I have followed all the steps but still it is showing error.