clear graphql data before exiting page

I am currently taking a phone number as an input and running a graphql query in my code, which works fine. However, once I click on Cancel, go back to a previous screen and then come back on this screen, If I use the same phoneNumber as last time, no query runs when I hit the search button.

However, if I use some other email address, that works. So I believe that since the graphql data of the previous query is already stored, when I submit the form with the same phoneNumber, it doesn't do anything. But if I am returning to the page again, I want everything to reset automatically. How can I fix this? Is there anyway to clear the data before exiting the page?

Here's what my code looks like:

export const Page: React.FunctionComponent<PageProps> = ({  toggleShowPage,  showPage,}) => {  const initialValues: FormValues = {    phoneNumber: '',  };  const [isSubmitted, setIsSubmitted] = useState(false);  const [userData, setUserData] = useState<UsersLazyQueryHookResult>('');  const validationSchema = phoneNumberValidationSchema;  useEffect(() => {    if (showAddFriendPhonePage) return;    initialValues.phoneNumber = '';  }, [showAddFriendPhonePage]);  const getFriendId = React.useCallback(    (data: UsersLazyQueryHookResult) => {      if (data) {        if (data.users.nodes.length == 0) {          Alert.alert('No User Found');        } else {          setUserData(data);        }      }    },    [addFriend],  );  const [loadUsers] = useUsersLazyQuery({    onCompleted: getFriendId,    onError: _onLoadUserError,  });  const handleSubmitForm = React.useCallback(    (values: FormValues, helpers: FormikHelpers<FormValues>) => {      setIsSubmitted(true);      loadUsers({        variables: {          where: { phoneNumber: values.phoneNumber },        },      });      values.phoneNumber = '';    },    [loadUsers],  );  return (<Modal      visible={showAddFriendPhonePage}      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 Phone</Text><Text style={styles.searchCancelDoneText}>Done</Text></View><View><Formik                initialValues={initialValues}                onSubmit={handleSubmitForm}                validationSchema={validationSchema}>                {({ handleChange, handleBlur, handleSubmit, values }) => (<View><View><FieldInput                        handleChange={handleChange}                        handleBlur={handleBlur}                        value={values.phoneNumber}                        placeholderText='49152901820'                      /></View><View style={styles.buttonContainer}><Button                        onPress={handleSubmit}><Text style={styles.searchButtonText}>Search </Text></Button></View></View>                )}</Formik></View>            {isSubmitted && showUsers(userData)}</View></View></SafeAreaView></Modal>  );};