Render via map instead of for loop

I am currently using this function to render some elements & display results after a graphql query:

 const showUsers = React.useCallback(    (data: UsersLazyQueryHookResult, numberOfUsers: Number) => {      if (data) {        for (var i = 0; i < numberOfUsers; i++) {          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                    onPress={() => {                      addFriend(Number(data.users.nodes[i].id));                      setIsSubmitted(false);                      setUserData(null);                    }}><Icon name="plus" size={moderateScale(20)} color="black" /></Button></View></View></View>          );        }      }    },    [createUserRelationMutation, userData, numberOfUsers],  );

I have read that using a for loop isn't a good idea. Hence, I am trying to switch to a map but I am unable to. I couldn't figure out how to use variables like const userNamewhile using a map.

Currently, I can only test with numberOfUsers = 1so it works fine but in reality, I want all of the item contained in the Viewwhich is styled as friends. For now, there will be a separate <View style={styles.friends}>for each item. However, I want to map all items inside one single <View style={styles.friends}>