create a separate modal for each item in the map

In my component ContactList, I map a few items like this:

  return (<View style={styles.users}>      {data.users.nodes[0].userRelations.map(        (item: { relatedUser: RelatedUser; id: number }) => {          const userName = item.relatedUser.firstName          const numberOfFriends = item.relatedUser.userRelations.length;          return (<View style={styles.item} key={item.id}><TouchableOpacity onPress={() => setIsUserVisible(true)}><Thumbnail                  source={{                    uri:'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',                  }}></Thumbnail></TouchableOpacity><View style={styles.nameNumber}><Text style={styles.userName}>{userName}</Text></View><UserDetails                firstName={item.relatedUser.firstName}                rating={item.relatedUser.rating}                numberOfFriends={numberOfFriends}                onDeleteContact={onDeleteContact}                isUserVisible={isUserVisible}                setIsUserVisible={setIsUserVisible}></UserDetails></View>          );        },      )}</View>  );};

They appear somewhat like this.

Now I want that when I click on the thumbnail of each item, a new modal should appear along with the details of that particular user.

However, currently, multiple modals get generated together and I believe they overlap so when I exit my modal and click on some other user's thumbnail, I don't get the correct modal opened up.

From my modal, I am also calling another component.

This is how my modal component looks like:

export const UserDetails: React.FunctionComponent<UserProps> = ({  firstName,  rating,  numberOfFriends,  onDeleteContact,  isUserVisible,  setIsUserVisible,}) => {  console.log(isUserVisible);  return (<Modal visible={isUserVisible}><View style={styles.container}>        {/* <View> */}<View><TouchableOpacity            style={styles.cross}            onPress={() => setIsUserVisible(false)}><Thumbnail              source={{                uri:'https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png',              }}></Thumbnail></TouchableOpacity>          {/* <Text>HELLOO</Text> */}</View><View style={styles.searchLocationContainer}><UserInfoContainer            firstName={firstName}            rating={rating}            numberOfFriends={numberOfFriends}></UserInfoContainer></View></View></Modal>  );};

What can I do to only generate/open 1 particular modal when I click on one user's thumbnail?