undo re-rendering when exiting screen

In my code, I take an email as an input and run a graphql query. Using the graphql query results, I use my showUsersfunction to render some components. When I hit canceland go to the previous screen (toggling), the rendered objects (results of query) should disappear. When I come back to the screen, I am still seeing them. How can I reset them while exiting?

Currently this is what I am doing in my return

{showUsers(userData, Number(numberOfUsers))}

Overview of my code:

export const Page: React.FunctionComponent<PageProps> = ({  toggleShowPage,  showAddFriendEmailPage,}) => {  const [userData, setUserData] = useState<UsersLazyQueryHookResult>('');  const [numberOfUsers, setNumberOfUsers] = useState('');  const validationSchema = emailValidationSchema;   const showUsers = React.useCallback(     (data: UsersLazyQueryHookResult, numberOfUsers: Number) => {       for (var i = 0; i < numberOfUsers; i++) {         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  rounded style={styles.addButton}               //onPress={() => addFriend(Number(data.users.nodes[i].id))}></Button></View></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) {          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>) => {      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}><View style={styles.searchTopTextContainer}><Text                style={styles.searchCancelDoneText}                onPress={toggleShowPage}>                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>            {showUsers(userData, Number(numberOfUsers))}            </View></View></SafeAreaView></Modal>  );};