Issue with email verification via firebase in expo – React native

According to how to verify user email in firebase react native(Expo). I can send a email verification right after I create a account in firebase via expo. But I am having trouble doing it.

Here is my code from my registerscreen file:

import { StyleSheet, Text, View, KeyboardAvoidingView, TextInput, TouchableOpacity } from 'react-native'
import React from 'react'
import { useNavigation } from '@react-navigation/native';
import { createUserWithEmailAndPassword } from "firebase/auth"
import { useState } from 'react'
import { auth } from '../firebase'
import { signOut } from 'firebase/auth'
import {sendEmailVerification } from "firebase/auth";

const RegisterScreen = () => {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [name, setName] = useState('')
    const [showError, setShowError] = useState(false);
    const navigation = useNavigation()
    const handleSignUp = async () => {
        try {
        if (email && password) {
           setShowError(false);
           const { user } = await createUserWithEmailAndPassword(auth, email, password)
           console.log('Registered as :' , user.email);
           try{
            const {user} = await sendEmailVerification(auth, email)
           }
           catch{
            
           }
           try{
            await signOut(auth)
            console.log("Signed out successfully")
            navigation.replace("Login")
          }catch (error) {
            console.log({error});
         }
          }
        } catch (error) {
           console.log({error});
           setShowError(true);
        }
    }
    return (

Currently the account is created but there is no email verification sent to the registered email. Can anyone help me out on this? Thank you very much.

Edited 1:

 try {
        if (email && password) {
           setShowError(false);
           createUserWithEmailAndPassword(email, password).then(async 
                ({user}) => {
                // 2. Send verification email
                await user.sendEmailVerification()
                console.log("Verification email sent!")  
           })
           catch{

           }
           try{
            await signOut(auth)
            console.log("Signed out successfully")
            navigation.replace("Login")
          }catch (error) {
            console.log({error});
         }
          }
        } catch (error) {
           console.log({error});
           setShowError(true);
        }

The following gives me:

Also, the auto log in happened but did not log out of account

Edited 2:

try {
        if (email && password) {
           setShowError(false);
           const { user } = await createUserWithEmailAndPassword(auth, email, password)..then(async ({user}) => {
           // 2. Send verification email
           await user.sendEmailVerification()
           console.log("Verification email sent!") 
           console.log('Registered as :' , user.email);
          
           try{
            await signOut(auth)
            console.log("Signed out successfully")
            navigation.replace("Login")
          }catch (error) {
            console.log({error});
         }
          }
        } catch (error) {
           console.log({error});
           setShowError(true);
        }

The above also doesn’t work. It gives me :

And the log out doesnt work anymore too. In this case, identical email can still be accepted somehow. I dont know why. But is isnt stored in firebase

Error from “`import firebase from ‘firebase’

Currently my registerscreen.js

import { StyleSheet, Text, View, KeyboardAvoidingView, TextInput, TouchableOpacity } from 'react-native'
import React from 'react'
import { useNavigation } from '@react-navigation/native';
import { createUserWithEmailAndPassword } from "firebase/auth"
import { useState } from 'react'
import { auth } from '../firebase'
import { signOut } from 'firebase/auth'
import {sendEmailVerification } from "firebase/auth";


const RegisterScreen = () => {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [name, setName] = useState('')
    const [showError, setShowError] = useState(false);
    const navigation = useNavigation()
    const handleSignUp = async () => {
        try {
        if (email && password) {
           setShowError(false);
           const { user } = await createUserWithEmailAndPassword(auth, email, password).then(async ({user}) => {
            auth().currentUser.sendEmailVerification()
            console.log("Verification email sent!")  
        })
           console.log('Registered as :' , user.email);
           
           try{
            await signOut(auth)
            console.log("Signed out successfully")
            navigation.replace("Login")
          }catch (error) {
            console.log({error});
         }
          }
        } catch (error) {
           console.log({error});
           setShowError(true);
        }
    }
    return (
    <KeyboardAvoidingView  //To prevent keyboard from blocking the writing area
        style={styles.container}
        behavior = "padding"
    >  
        <View style = {styles.inputContainer}> 
            <Text>Email:</Text>
            <TextInput
                placeholder = "Email"
                value={email}
                onChangeText ={text => setEmail(text)}
                style = {styles.input} 
            />
            <Text></Text>
            <Text>Password:</Text>         
            <TextInput
                placeholder = "Password (Min: 6 chars)"
                value={password}
                onChangeText ={text => setPassword(text)}
                style = {styles.input} 
                secureTextEntry //Hide password
            />
            
            
        </View> 
        {showError && <View style={styles.error}>
          <Text>Email taken or password not valid - Min: 6 char</Text>
        </View>}        
        <View style = {styles.buttonContainer}>
            <TouchableOpacity
                onPress = {handleSignUp}
                style = {styles.button}
            >
                <Text style={styles.buttonText}>Register</Text>
            </TouchableOpacity>
        </View>                            
    </KeyboardAvoidingView> 
  )
}