can't submit a form when using FlatLists

Previously, I was rendering and mapping some data using another component called UserList. However, now I have changed it to a FlatList

When I was using {/* <UserList onSendRequest={onSendRequest} data={userData}></UserList> */}, every time I clicked on the button, the handleSubmit function was called successfully.

However, now I am using FlatList. Nothing happens when I click on the button. The handle submit does not run and I don't see anything from the flatList. What am I doing wrong?

  return (<SafeAreaView><View><View style={styles.searchTopContainer}><View style={styles.searchTopTextContainer}><Text>              Cancel</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.input}                      fieldType="input"                      icon="user"                      placeholderText="Email or Phone Number or Name"                    /><ErrorMessage                      name="input"                      render={(msg) => (<Text style={styles.errorText}>{msg}</Text>                      )}                    /></View><View style={styles.buttonContainer}><Button                      rounded                      style={styles.searchButton}                      onPress={handleSubmit}><Text style={styles.searchButtonText}>Search </Text></Button></View></View>              )}</Formik></View>          {/* <UserList onSendRequest={onSendRequest} data={userData}></UserList> */}          {userData !== null && <FlatList            data={userData.users}            horizontal={false}            renderItem={({ item }) => (<SingleUser                user={item}                onSendRequest={onSendRequest}              />            )}            keyExtractor={(item) => item.id.toString()}          />            }</View></View></SafeAreaView>  );};

UserList.tsx:

export const UserList: React.FunctionComponent<UserProps> = ({  data,  onSendRequest,}) => {  if (!data) return null;  return (<View style={styles.users}>      {data.users.nodes.map(        (item: { firstName: string; lastName: string; id: number }) => {          const userName = item.firstName.concat('').concat(item.lastName);          return (<View style={styles.item} key={item.id}><Thumbnail                style={styles.thumbnail}                source={{                  uri:'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',                }}></Thumbnail><Text style={styles.userName}>{userName}</Text><View style={styles.addButtonContainer}><Button                  rounded                  style={styles.addButton}                  onPress={() => onSendRequest(Number(item.id))}><Icon name="plus" size={moderateScale(20)} color="black" /></Button></View></View>          );        },      )}</View>  );};