Form Submission Works Only Once

In my code, I run a graph query and then call the showUsers function inside getUserId. This function displays all the users in a styled box.

Once I enter an email and submit the form by hitting the button, I see the rendered object from showUsers. However, after that, I can no longer click on the button and submit the form with a new email input. How can I fix this?

Code:

export const Page: React.FunctionComponent<PageProps> = ({  toggleShowPage,  showAddFriendEmailPage,}) => {  const initialValues: FormValues = {    email: '',  };  const [errorMessage, setErrorMessage] = useState('');  const [userData, setUserData] = useState<UsersLazyQueryHookResult>('');  const [numberOfUsers, setNumberOfUsers] = useState('');  const validationSchema = emailValidationSchema;  useEffect(() => {    setUserData(userData);    setNumberOfUsers(numberOfUsers);  }, [userData, numberOfUsers]);  const showAlert = () => {    Alert.alert('Friend Added');  };  useEffect(() => {    if (showAddFriendEmailPage) return;    initialValues.email = '';  }, [showAddFriendEmailPage]);  const _onLoadUserError = React.useCallback((error: ApolloError) => {    setErrorMessage(error.message);    Alert.alert('Unable to Add Friend');  }, []);  const [    createUserRelationMutation,    {      data: addingFriendData,      loading: addingFriendLoading,      error: addingFriendError,      called: isMutationCalled,    },  ] = useCreateUserRelationMutation({    onCompleted: (data: CreateUserRelationMutationResult) => {      showAlert();    },  });   const showUsers = React.useCallback(     (data: UsersLazyQueryHookResult, numberOfUsers: Number) => {       for (var i = 0; i < numberOfUsers; i++) {        console.log('Number of Users in Loop: ', numberOfUsers);         const userId = data.users.nodes[i].id;         const userName = ((data.users.nodes[i].firstName).concat('')).concat(data.users.nodes[i].lastName);         console.log('Whats the Id', userId);         console.log('UserName', userName);         console.log('Loop');         return(<View style={styles.friends}><View style={styles.item}><Text>{userName}</Text></View></View>         )       }           },     [createUserRelationMutation],   );  const addFriend = React.useCallback(    (id: Number) => {      console.log('Whats the Id', id);      createUserRelationMutation({        variables: {          input: { relatedUserId: id, type: RelationType.Friend, userId: 7 },        },      });    },    [createUserRelationMutation],  );  const getFriendId = React.useCallback(    (data: UsersLazyQueryHookResult) => {      if (data) {        if (data.users.nodes.length == 0) {          setErrorMessage('User Not Found');          Alert.alert('User Not Found');        } else {          setUserData(data);          setNumberOfUsers(data.users.nodes.length);          showUsers(data, Number(numberOfUsers));          addFriend(Number(data.users.nodes[0].id));        }      }    },    [addFriend],  );  const [loadUsers] = useUsersLazyQuery({    onCompleted: getFriendId,    onError: _onLoadUserError,  });  const handleSubmitForm = React.useCallback(    (values: FormValues, helpers: FormikHelpers<FormValues>) => {      console.log('Submitted');      loadUsers({        variables: {          where: { email: values.email },        },      });      values.email = '';    },    [loadUsers],  );  return (<Modal      visible={showAddFriendEmailPage}      animationType="slide"      transparent={true}><SafeAreaView><View style={styles.container}><View style={styles.searchTopContainer}><Formik                initialValues={initialValues}                onSubmit={handleSubmitForm}                validationSchema={validationSchema}>                {({ handleChange, handleBlur, handleSubmit, values }) => (<View style={styles.searchFieldContainer}><View style={styles.form}><FieldInput                        handleChange={handleChange}                        handleBlur={handleBlur}                        value={values.email}                        fieldType="email"                      /><ErrorMessage                        name="email"                        render={msg => (<Text style={styles.errorText}>{msg}</Text>                        )}                      /></View><View style={styles.buttonContainer}><Button                        rounded                        style={styles.button}                        onPress={handleSubmit}><Text style={styles.text}>Add Friend </Text></Button></View></View>                )}</Formik></View>            {showUsers(userData, Number(numberOfUsers))}</View></View></SafeAreaView></Modal>  );};

When I was using my code without showUsers, I wasn't facing this issue.