React Native TypeScript TextInput not working

I am trying to learn react native by doing a basic application. I followed many tutorials available online and made the following class for a login screen:

import React, { Component } from "react";import { View, StyleSheet, TextInput, Button, Alert, TouchableHighlight, Text } from "react-native";import { styles } from "../styles/CommonStyles";class LoginScreen extends Component {    constructor(props: Readonly<{}>) {        super(props)    }    state = {        email: ''    }    static navigationOptions = {        title: 'Login',        header: null    }    render() {        const { navigate } = this.props.navigation        return (<View style={styles.container}><TextInput                style={loginStyles.emailInput}                multiline={false}                autoCorrect={false}                autoCapitalize='none'                keyboardType='email-address'                value={this.state.email}                onChangeText={(text) => this.handleEmail(text)}                placeholder='Enter Email'/><TouchableHighlight                style={loginStyles.buttonGenerateOTP}                onPress={this.onGenerateOTP}><Text                    style={loginStyles.textGenerateOTP}>GENERATE OTP</Text></TouchableHighlight></View>        )    }    handleEmail(text: string) {        console.log('Email: '+ text)        this.setState({ email: text })        console.log('State Email: '+ this.state.email)    }    onGenerateOTP() {        Alert.alert('Email Entered',            this.state.email,            [                { text: 'OK', style: 'cancel' }            ],            { cancelable: false }        )    }}export default LoginScreenconst loginStyles = StyleSheet.create({    emailInput: {        fontSize: 15,        backgroundColor: '#ECECEC',        borderColor: '#999999',        borderRadius: 4,        borderWidth: 0.5,        alignSelf: 'stretch',        textAlign: 'center',        margin: 10,      },      buttonGenerateOTP: {          backgroundColor: '#008CBA',          borderRadius: 4,          alignSelf: 'stretch',          justifyContent: 'center',          alignItems: 'center',          margin: 10,          padding: 10,    },    textGenerateOTP: {        fontSize: 20,        color: '#FFFFFF',    },})

It only contains an input and a button, on which an alert should be shown with the entered email. But when I click the button, I am getting the following error:

undefined is not an object (evaluating 'this.state.email')onGenerateOTPLoginScreen.tsx:43:8...

I am pretty new to react native and typescript, but looking at the code, I couldn't figure out any issues. What is it that I am doing wrong here?

EDITThe log in handleEmail(text) function is actually printing the state, although with the previous value of text(ie, when I enter QWERT, it will print QWER, and when I enter QWERTY, it will print QWERT), but the text param is logging correctly