title: React Native TouchableOpacity onPress not working with FlatList
body: <p>I created a FlatList of selectable countries like this</p>
  <pre><code>export default function Body() {
   const data = useData();
   const [selected, setSelected] = useState(1);
   const renderItem = ({ item }) =&gt; {
   return item.empty ? (
    &lt;View style={styles.blank} /&gt;
    ) : (
    &lt;Country
      text={item.name}
      onPress={() =&gt; setSelected(item.id)}
      selected={item.id === selected}
    &gt;
      &lt;item.Flag /&gt;
    &lt;/Country&gt;
   );
  };
  return (
  &lt;View style={styles.container}&gt;
    &lt;FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) =&gt; item.id.toString()}
      extraData={selected}
      showsVerticalScrollIndicator={false}
      contentContainerStyle={styles.flatlist}
      numColumns={3}
    /&gt;
  &lt;/View&gt;
  );
  }
  </code></pre>
  <p>And I defined a Country component like this</p>
  <pre><code>import React from &quot;react&quot;;
  import { View, Text, TouchableOpacity } from &quot;react-native&quot;;
  import { styles } from &quot;./Style&quot;;
  
  export default function Country({ children, text, onPress, selected }) {
    return (
      &lt;View style={styles.container}&gt;
        &lt;View style={[styles.view, selected &amp;&amp; styles.selected]}&gt;
          &lt;TouchableOpacity onPress={onPress}&gt;{children}&lt;/TouchableOpacity&gt;
        &lt;/View&gt;
        &lt;TouchableOpacity onPress={onPress}&gt;
          &lt;Text style={styles.text}&gt;{text}&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  <p>Everything was working perfectly fine and I was able to select a country but somehow now the touchableOpacity onPress event seems broken and the elements are no longer pressable. for things to work I need to edit and undo edit on the data array or the Country component. Is this a RN bug causing things to fail?</p>