undefined is not an object (evaluating '_this2.props') onPress - firebase

Question

React native beginner here, Im trying to pass from login to HomeTeacher/HomeParent, according to the status in the database (firestore). When I'm printing the status, he is good ("Teacher"/"Parent"), but it doesnt go the HomeParent/HomeTeacher
When I press on the button I get the "Error getting document: [TypeError: undefined is not an object (evaluating '_this2.props.navigation')]" error...
Here is my code :
import React from 'react';
import { ImageBackground,Image, TouchableOpacity, StyleSheet, Text, View,TextInput,Dimensions } from 'react-native';
import background from "../Images/background.jpg";
import Logo from "../Images/Independo.png";
import firebase, { firestore } from 'firebase/app';
import { ThemeProvider } from 'react-native-elements';
require('firebase/auth')
require('firebase/firestore')
const {width : WIDTH } = Dimensions.get('window')
const screenHeight=Dimensions.get('window').height
const screenWidth=Dimensions.get('window').width
class LoginAdult extends React.Component {
constructor(props){
super(props)
this.state={
email:'',
password:'',
// status:''
}
}
LoginPress= async()=>{
const {email,password,}=this.state;
if(this.state.email && this.state.password)
{firebase.auth().signInWithEmailAndPassword(email,password)
.then(firebase.auth().onAuthStateChanged(function(user)
{
if (user != null)
{
var docRef=firebase.firestore().collection("Users").doc(user.uid);
docRef.get().then((doc) => {
if (doc.exists) {
console.log("Document data:", doc.data());
const {status} = doc.data();
if(status=="Teacher")
{
console.log("status = ",status)
this.props.navigation.navigate("HomeTeacher")
}
else if(status=="Parent")
{
this.props.navigation.navigate("HomeParent")
}
} else {
console.log("No such document!");
}
}).catch((error) => {
console.log("Error getting document:", error);
});
}
}))
.catch((error)=>{
switch(error.code)
{
case 'auth/invalid-email':
alert("Please, enter a valid mail")
break;
case 'auth/user-not-found':
alert('A user with this email doesnt exist, please sign Up')
break;
}
})
}
else{
alert("Please enter email and password!")
}
}
render(){
return (
<ImageBackground source={background} style={styles.imagebackground}>
<View style={{header:25,backgroundColor:"",alignItems:'center',marginTop:40}}>
<Image source={Logo} style={styles.logo}/>
</View>
<View style={{flex:1,borderWidth:0,borderColor:'transparent',margin:40,marginTop:0,marginBottom:220}}>
<View style={{flex:1,backgroundColor:"#F9f3fc",alignItems:'center',paddingTop:35,borderRadius:15,borderStyle:'dotted solid double'}}>
<Text style={{fontWeight:'bold',fontSize:30,paddingBottom:30}}>LOGIN</Text>
<TextInput
style={styles.input}
placeholderTextColor={'black'}
placeholder={'Email'}
onChangeText={inputEmail=>this.setState({email:inputEmail})}/>
<TextInput
style={styles.input}
placeholderTextColor={'black'}
placeholder={'Password'}
secureTextEntry={true}
onChangeText={inputPassword=>this.setState({password:inputPassword})}/>
<TouchableOpacity style={styles.btnLogin} onPress={()=>this.LoginPress()}>
<Text style={{fontWeight:'600'}}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
style={{alignItems:'center',flexDirection:'row'}}
onPress={()=>this.props.navigation.navigate("SignUp")}>
<Text>Dont have an account? </Text>
<Text style={styles.text}>Sign Up</Text>
</TouchableOpacity>
<TouchableOpacity
style={{alignItems:'center',flexDirection:'row',margin:4}}
onPress={()=>this.props.navigation.navigate("ForgotPasswordAdult")}>
<Text style={{textDecorationLine:'underline' ,fontSize:16 ,fontWeight:'bold',}}>
Forgot Password?
</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
);
}
}
export default LoginAdult;