Button onPress does not work on second attempt

I have a form where I enter an email address, run a graphql query accordingly, display some results and then run a mutation. Currently, this works successfully on the first attempt. However, when I try to re-enter an email address and submit the form again, I am unable to click on the button. It's disabled somehow.

Here's what my code looks like:

export const Page: React.FunctionComponent<PageProps> = ({  toggleShowPage,  showAddFriendEmailPage,}) => {  const initialValues: FormValues = {    email: '',  };  const [errorMessage, setErrorMessage] = useState('');  const [isSubmitted, setIsSubmitted] = useState(false);  const [userData, setUserData] = useState<UsersLazyQueryHookResult>('');  const [numberOfUsers, setNumberOfUsers] = useState('');  const validationSchema = emailValidationSchema;   const showUsers = React.useCallback(     (data: UsersLazyQueryHookResult, numberOfUsers: Number) => {      if (data){       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);         return (<View style={styles.friends}><View style={styles.item}><Text style={styles.userName}>{userName}</Text><View style={styles.addButtonContainer}><Button                   onPress={() => {                     addFriend(Number(data.users.nodes[i].id));                     setIsSubmitted(false);                   }}></Button></View></View></View>         );       }}     },     [createUserRelationMutation, userData, numberOfUsers],   );  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);        }      }    },    [addFriend],  );  const [loadUsers] = useUsersLazyQuery({    onCompleted: getFriendId,    onError: _onLoadUserError,  });  const handleSubmitForm = React.useCallback(    (values: FormValues, helpers: FormikHelpers<FormValues>) => {      setIsSubmitted(true);      console.log('Submitted');      loadUsers({        variables: {          where: { email: values.email },        },      });      values.email = '';    },    [loadUsers],  );  if (!addingFriendLoading && isMutationCalled) {    if (addingFriendError) {      setErrorMessage(addingFriendError.message);      Alert.alert('Unable to Add Friend');    }  }  return (<Modal      visible={showAddFriendEmailPage}      animationType="slide"      transparent={true}><SafeAreaView><View style={styles.container}><View style={styles.searchTopContainer}><View style={styles.searchTopTextContainer}><Text                style={styles.searchCancelDoneText}                onPress={() => {                 toggleShowPage()                  setIsSubmitted(false);                  setUserData(null);              }}>                Cancel</Text><Text style={styles.searchTopMiddleText}>                Add Friend by Email</Text><Text style={styles.searchCancelDoneText}>Done</Text></View><View><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}>Search </Text></Button></View></View>                )}</Formik></View>            {isSubmitted && showUsers(userData, Number(numberOfUsers))}    </View></View></SafeAreaView></Modal>  );};

The issue only occurs if the showUsersis called i.e when numberOfUsers > 0. So If no users were found and no conditional rendering occurs, I can still reuse the form. But in case showUsersis being used, then I can't.

Also, once the conditional rendering is done, and I click on the button inside the new conditionally rendered element, the procedure is successful. After that, I can again submit the form.