Render from a callback function - typescript

While using a graphql query, I am calling a showUsers function which is supposed to show all the users (the stying is done so that they can appear as boxes). However, currently nothing shows up.

I am using a functional component, not class component.

This function is called after my handleSubmitForm. Here I call showUsers.

  const getFriendId = React.useCallback(    (data) => {      if (data) {        if (data.users.nodes.length == 0) {          Alert.alert('User Not Found');        } else {          const numberOfUsers = data.users.nodes.length;          showUsers(data, numberOfUsers);          addFriend(Number(data.users.nodes[0].id));        }      }    },    [addFriend],  );

showUsers():

   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((data.users.nodes[i].lastName));         return(<View style={styles.friends}><View style={styles.item}><Text>{userName}</Text></View></View>         )       }           },     [createUserRelationMutation],   );

This is how my form looks like. I guess I have to make an edit here but I am not sure how.

return (<Modal      visible={showAddFriendEmailPage}      animationType="slide"      transparent={true}><SafeAreaView><View style={styles.container}><View style={styles.searchTopContainer}><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}>Add Friend </Text></Button></View></View>                )}</Formik></View></View></View></SafeAreaView></Modal>  );};

Note: I only want them to show up below the button, after I submit the form.

I tried this:

type ShowUsersProps = {  data: UsersLazyQueryHookResult;  numberOfUsers: Number;};const ShowUsers: React.FunctionComponent<ShowUsersProps> = ({  data,  numberOfUsers,}) => {  console.log('Hello');  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);    console.log('Whats the Id', userId);    console.log('Whats the Id', userName);    return(<View style={styles.friends}><View style={styles.item}><Text>{userName}</Text></View></View>    )  }      }

But I get this on ShowUsers:

Type '({ data, numberOfUsers, }: PropsWithChildren<ShowUsersProps>) => Element | undefined' is not assignable to type 'FunctionComponent<ShowUsersProps>'.  Type 'Element | undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.