HelperText плохо работает в реакционной нативной бумаге

Question

<TextInput style={styles.inputBox}
           mode="flat"
           label="Your Email"
           value={this.state.email}
           onChangeText={(email) => this.setState({email})}
><HelperText type="error" visible={!this.state.email.includes('@')}>Email is invalid!</HelperText></TextInput>


const styles = StyleSheet.create({
    inputBox: {
        width: 250,
        paddingHorizontal: 16,
        fontSize: 16,
        marginVertical: 10,
    },
});

HelperText здесь работает плохо. Он показывает сообщение об ошибке прямо в TextInput, поэтому я не могу использовать это поле ввода.

Я новичок в реакции-родной. Пожалуйста, помогите мне.