I get navigation error when I switch login screen to Chat - react-native

Question

I have imported and declared const navigation = useNavigation() and navigated to chat with navigation.navigate(Chat) but when I run the VM it gives error and navigationenter image description here
import React , {useState } from 'react';
import {View, StyleSheet,Text ,TouchableOpacity,TextInput} from 'react-native';
import { useNavigation } from '#react-navigation/native';
import { firebase } from '../config/firebaseSDK';
import Signup from '../Screens/SignUp';
import Chat from '../Components/Chat';
const Login = () => {
const navigation = useNavigation()
const [email,setEmail] = useState(' ')
const [password,setPassword] = useState(' ')
const loginUser = async(email,password) =>{
try {
await firebase.auth().signInWithEmailAndPassword(email,password)
.then(()=>navigation.navigate(Chat))
} catch (error){
alert(error.message)
}
}
return (
<View style={styles.container}>
{/* <Text style={{fontWeight:'bold',fontSize:26}}>Login</Text> */}
<View style={{marginTop:40}}>
<TextInput
style={styles.textInput}
placeholder="Email"
onChangeText={(email)=>setEmail(email)}
autoCapitalize="none"
autoCorrect={false}
/>
<TextInput
style={styles.textInput}
placeholder="Password"
onChangeText={(password)=>setPassword(password)}
autoCapitalize="none"
autoCorrect={false}
/>
</View>
<TouchableOpacity
onPress={()=>loginUser(email,password)}
style={styles.button}>
<Text style={{fontWeight:"bold",fontSize:21}}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={()=>navigation.navigate(Signup)}
style={{marginTop:20}}>
<Text style={{fontWeight:"bold",fontSize:16}}>
Don't have an accout?Registry Now
</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container : {
flex:1,
alignItems:'center',
marginTop:100,
},
textInput:{
paddingTop:20,
paddingBottom:10,
width:400,
fontSize:20,
borderBottomWidth:1,
borderBottomColor:'#000',
marginBottom:10,
textAlign:'center'
},
button :{
marginTop:50,
height:70,
width:250,
backgroundColor:'#026efd',
alignItems:'center',
justifyContent:'center',
borderRadius:50
}
})
export default Login;
This is the error message when I click the login button: The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or
if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.