Вызов модального окна для списка продуктов открывает модальное окно для всех из них, а не только для того, по которому щелкнули.

Я делаю нативное приложение для реагирования, которое загружает данные из google firebase, а затем отображает их на странице, когда пользователь нажимает на любой из продуктов, открывается модальное окно, чтобы показать больше данных.

Я использую useEffect для загрузки данных при загрузке страницы, а затем отображаю результаты:

 const fetchData = async () => {
    const categories = db.collection("productsDB");
    const collections = await categories
      .limit(6)
      .onSnapshot((querySnapshot) => {
        const items = [];

        querySnapshot.forEach((documentSnapshot) => {
          items.push({
            ...documentSnapshot.data(),
            key: documentSnapshot.id,
          });
        });

        setItems(items);
        setLoading(false);
      });

    return () => collections();
  };

  useEffect(() => {
    fetchData();
  }, []);

и показать их так:

{loading ? (
              <ActivityIndicator />
            ) : (
              items.map((item) => (
                <TouchableOpacity
                  style={styles.queryResult}
                  key={item.key}
                  onPress={() => {
                    setModalVisible(!modalVisible);
                  }}
                >
                  <View style={styles.queryResultContent}>
                    <Image
                      style={{ width: 100, height: 100 }}
                      source={{ uri: String(item.images) }}
                    />

                    <View>
                      <Text style={styles.queryInfoHeader}>{item.name}</Text>
                    </View>
                  </View>
                  <View>
                    <ProductModal
                      isModalVisible={modalVisible}
                      setModalVisible={setModalVisible}
                      navigation={navigation}
                      {...item}
                    />
                  </View>
                </TouchableOpacity>
              ))
            )}

когда я открываю модальное окно, оно открывает модальное окно для всех продуктов, и на самом деле не имеет значения, нажимаю ли я на первый продукт или что-то еще, оно открывает все модальные окна, и я не знаю, как от этого избавиться!

есть ли лучший способ написать эту функцию?