How to change automatically the borderColor of my TextInput for email according if email address is valid?

How to / Third Party Tooling
1

Hi people, in my register form I have a textInput email with a function for change border color but this don’t works:

import { validateEmail } from "../components/validatemail";

export default function Register() {
  const [formError, setFormError] = useState({});

  const email = (mail) => {
    let errors = {};
    if(!validateEmail(mail)) {
      errors.email = true;
      setFormError(errors);
    }else{
      errors.mail = false;
    }
    setFormError(errors);
  }

  return(
    <ScrollView style={styles.container}>    
          <View style={{flex:1, flexDirection:'column'}}>
              <View style={[styles.inputGroup, formError.email && styles.errorInput]}>
                <Icon style={styles.searchIcon} name="envelope-o" size={19} color="#5292de"/>
                <TextInput 
                  placeholder="Correo" 
                  keyboardType="email-address" 
                  autoCompleteType="email" 
                  placeholderTextColor="#869AD6" 
                  onChange={email}
                />
              </View>
          </View>
    </ScrollView>
);
}
const styles = StyleSheet.create({
  inputGroup: {
    flex: 1,
    padding: 0,
    marginBottom: 15,
    borderBottomWidth: 1,
    borderColor: '#E7E7E7',
    borderBottomColor: '#cacaca',
    backgroundColor: 'white',
    flexDirection: 'row',
    borderRadius: 5,
    width: 280,
    height: 50,
    alignSelf: 'center',
  },
  errorInput: {
    borderColor: '#940c0c',
  },
});

the validateEmail function works, but it throws an error being inside that if, and when the function has not given problems, when writing inside the textInput nothing changes. What I can do? What am I doing wrong?