onEndEditing doesn't fire off when user stops typing on text field on React Native App

I am currently following a React Native tutorial on building an app with login functionality.

Right now, I am trying to get onEndEditing to work so that when the users stops typing on the username field, the code will check to see if the username is at least 4 characters long. If not, an error message will be displayed.

However, onEndEditing doesn't work despite following the documentation. I wonder if someone here can kindly help me.

const [ data, setData ] = React.useState({
login: '',
password: '',
securePassword: true,
userValid: false,
userNameErrMess: false,
})

//This function handles the text input of the username field
const handleLoginInfo = (val) => {
if(val.trim().length >= 4)
{
    setData({
        ...data,
        login: val,
        userNameErrMess: false,
    })
    }
else{
        setData({
            ...data,
            login: val,
        })
        }
}


/*This function determines whether the error message should be displayed or not based on how characters long the username is. */
const isLoginValid = (val) => {
    if(val.trim().length >= 4){
        setData({
            ...data,
            userNameErrMess: false,
        })
    }
    else{
        setData({
            ...data,
            userNameErrMess: true,
        })
       alert('userNameErrMess: ' + userNameErrMess)
    }
}

The following code renders the text input field.

       <Text>Username or Email</Text>
        <View style = {styles.textInputContainer}>
            <Icon name = 'person-outline' style = {{padding: 10,}} size = {15} />
            <TextInput
                placeholder = 'Please, type your username or email here.'
                value = {data.login}
                autoCapitalize = 'none'
                onChangeText = {(val) => handleLoginInfo(val)}
                onEndEditing = {(e) => isLoginValid(e.nativeEvent.text)}
                style = {styles.textInput}
            />
            {data.userValid ?
            <Feather name = 'check-circle' size = {15} style = {{padding: 10,}} />
            :
            <Feather name = 'check-circle' size = {15} style = {{padding: 10,}} color = '#ccdde3' />
            }
        </View>
        {data.userNameErrMess &&
            <Animatable.View
                animation = 'slideInLeft'
                duration = {500}
            >
                <Text style = {{color: 'red', fontSize: 14,}}>Error: Username must be at least 4 characters long.</Text>
            </Animatable.View>
        }