Returning error when actually it's right

Hi, I started using this library and I found something weird happening to me, when I type just one letter in my input, for some reason, it runs against my rules and does not pass in my required rule, and that's wrong since I have 1 letter in my input. Also, why is it checking my rules every time I type something in my input? I don't need that, I can just validate when I submit the form.

Note: I'm using React Native

My screen component which holds the form:

const Login: FunctionComponent<{
    navigation: StackNavigationProp<{}>
}> = ({ navigation }) => {
    const { login } = useContext(UserContext)

    const [form] = useForm()

    navigation.setOptions({
        title: 'Login'
    })

    const authenticate = () => {
        form.validateFields().then(({ email, password }) => {

        })
    }

    return (
        <Screen>
            <View style={[GlobalStyles.flex, GlobalStyles.alignCenter, GlobalStyles.justifyCenter]}>
                <Image style={styles.image} source={require('../../../assets/black_logo.png')} />
                <Form component={FormView} form={form}>
                    <Field name="email" rules={[{ required: true }]}>
                        <Input placeholder="Email" />
                    </Field>
                    <Field name="Password" rules={[{ required: true }]}>
                        <Input placeholder="Password" secureTextEntry={true} />
                    </Field>
                </Form>
                <Button type="primary" onPress={authenticate}>
                    ENTRAR
                </Button>
            </View>
        </Screen>
    )
}

My Field component:

const Field: FunctionComponent<{

} & FieldProps> = ({ children, ...props }) => {
    return (
        <FormField trigger="onChangeText" getValueFromEvent={text => text} {...props}>
            {
                (control, meta) => {
                    return <View>
                        {
                            React.cloneElement(children as any, { error: meta.errors.length > 0, ...control })
                        }
                        {
                            meta.errors.map((error, index) => (
                                <Error key={index}>
                                    {error}
                                </Error>
                            ))
                        }
                    </View>
                }
            }
        </FormField>
    )
}

And my Input component:

const Input: FunctionComponent<{
    error?: boolean
} & TextInputProps> = ({ error, ...props }) => {
    return (
        <TextInput style={[styles.container, error ? styles.error : {}]} {...props} />
    )
}

This only happens when you type the FIRST LETTER ONLY. When you type the second letter the error goes away, also if you have 2 letters and remove one letting the input value with 1 letter, the error doesn't show as well, so this only happens when the input is empty and you type one letter only.

The report provides Login, Field, and Input component snippets; start by reproducing the one-character case with FormField trigger="onChangeText" and the required rule. Trace when validation runs versus form.validateFields() and confirm the required error is absent for a non-empty one-character value while submit validation still works.