title: Calling modal on a list of products opens the modal for all of them instead of just the one being clciked
body: <p>I am making a react native app that loads data from google firebase and then display it on a page, when a user clicks on any of the products aa modal will open to show more datails.</p>
  <p>I am using useEffect to load the data on page load then display then results:</p>
  <pre><code> const fetchData = async () =&gt; {
      const categories = db.collection(&quot;productsDB&quot;);
      const collections = await categories
        .limit(6)
        .onSnapshot((querySnapshot) =&gt; {
          const items = [];
  
          querySnapshot.forEach((documentSnapshot) =&gt; {
            items.push({
              ...documentSnapshot.data(),
              key: documentSnapshot.id,
            });
          });
  
          setItems(items);
          setLoading(false);
        });
  
      return () =&gt; collections();
    };
  
    useEffect(() =&gt; {
      fetchData();
    }, []);
  </code></pre>
  <p>and the show them like this:</p>
  <pre><code>{loading ? (
                &lt;ActivityIndicator /&gt;
              ) : (
                items.map((item) =&gt; (
                  &lt;TouchableOpacity
                    style={styles.queryResult}
                    key={item.key}
                    onPress={() =&gt; {
                      setModalVisible(!modalVisible);
                    }}
                  &gt;
                    &lt;View style={styles.queryResultContent}&gt;
                      &lt;Image
                        style={{ width: 100, height: 100 }}
                        source={{ uri: String(item.images) }}
                      /&gt;
  
                      &lt;View&gt;
                        &lt;Text style={styles.queryInfoHeader}&gt;{item.name}&lt;/Text&gt;
                      &lt;/View&gt;
                    &lt;/View&gt;
                    &lt;View&gt;
                      &lt;ProductModal
                        isModalVisible={modalVisible}
                        setModalVisible={setModalVisible}
                        navigation={navigation}
                        {...item}
                      /&gt;
                    &lt;/View&gt;
                  &lt;/TouchableOpacity&gt;
                ))
              )}
  </code></pre>
  <p>when I open the modal, it opens the modal for all of the products and doesnt really matter if I click on the first product or what, it opens all of the modals, and I am not sure how to get rid of this!</p>
  <p>is there any better way to write this function?</p>