How to make React check the user input from the first character?

React App. Auth form. On user input I'm checking if the user is writing correct stuff(email for email and latin chars + digits for password)

The problem is, that it shows result in the browser not at the moment of typing, but one character later. Examples:

1. Should check from the first char, but doesn't: Starting to enter smth
2. Should already show the message, that all is ok, but doesn't. Only shows after + one extra symbol typed: Finishing typing email Added a space and it worked

The input is as follows:

                        <input
                        type='text'
                        placeholder='Email'
                        name='login'
                        required
                        onChange={this.handleChange}
                    />

The handler (the login part, for password the same):

handleChange(event) {
    this.setState({
        field: event.target.name,
    });
    if (this.state.field === 'login') {
        this.setState({
            loginValue: event.target.value,
        });
        const result = this.checkLogin(this.state.loginValue);
        if (result == true) {
            this.setState({loginErrorMessage: "Email true", loginValid: true})
        } else {
            this.setState({loginErrorMessage: result.message.toString(), loginValid: false})
        }
    }
}

The checking fuction:

    checkLogin(value) {
    try {
        if (value.match(/^[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}$/) == null) {
            throw new Error("Value must be email");
        }
        else {
            return true
        }
    } catch (myError) {
        return myError
    }
}

I'm new to state managing in general and to React in particular. I guess I'm changing state somewhere in the wrong place. Please, help.