export const Page: React.FunctionComponent<PageProps> = ({}) => { const initialValues: FormValues = { friendEmail: '', }; const validationSchema = emailValidationSchema; const getFriendId = React.useCallback( .... }, [addFriend], //[friendEmail, addFriend], ); const [loadUsers] = useUsersLazyQuery({ onCompleted: getFriendId, onError: _onLoadUserError, }); const handleSubmitForm = React.useCallback( (values: FormValues, helpers: FormikHelpers<FormValues>) => { loadUsers({ variables: { where: { email: values.friendEmail }, }, }); //setFriendEmail(''); values.friendEmail = ''; }, [loadUsers], //[loadUsers, friendEmail] ); return (<Modal visible={showAddFriendEmailPage} animationType="slide" transparent={true}><SafeAreaView><Formik initialValues={initialValues} onSubmit={handleSubmitForm} validationSchema={validationSchema}> {({ handleChange, handleBlur, handleSubmit, isSubmitting, values, }) => (<View><View><Item style={scaledAddFriendEmailStyles.searchField}><Field component={Input} name='friendEmail' placeholder="Email" handleChange={handleChange} handleBlur={handleBlur} //onChange={handleChange} //onChangeText={handleChange('friendEmail')} //onBlur={handleBlur('friendEmail')} value={values.friendEmail} autoCapitalize="none" /></Item></View><View ><Button onPress={handleSubmit}><Text > Add Friend{''}</Text></Button></View></View> )}</Formik></SafeAreaView></Modal> );};Why am I unable to write anything inside my Input field? I have tried using onChangeand handleChangeboth but it doesn't make a difference. Other SO answers suggested that I should remove value but examples of Formik usage that I see online suggest otherwise.
I am trying to follow this for my Formik validation: