Component inside of flatlist should block the vertical scroll on flatlist

Question

So I'm having some issues. I have a flatlist that renders a bunch of items. Each item has a responsive map which is rendered inside of a react-native-webview. Hence, I can not for sure now when the user is interacting with the map.

If I disable scroll on the flatlist, every interaction with the map works smoothly. However, that is not really a solution as most of the times the items exceeds the screen.

What is the best component for detecting on-click events inside of a flatlist and hence blocking the vertical scroll? If I interact with the map and do horizontal movements, it works perfectly.

I've tried using with PanResponder, Touchable with onPressIn, onPressOut, but nothing seems to do the trick.

I've even tried to add an extra flatlist with items={null} scrollEnabled={false} and then displaying the map in a header, but this does not work either.

My code looks basically something like this.The TouchableHighlight version does not work at all. I can see that scrollEnabled gets set to false. But the interaction seems to not propagate down to the map then and instead nothing happens. So while pressing in on the Touchable the view is not scrolling, nor the interaction in the map is happening.

const [scrollEnabled, setScrollEnabled] = useState(true)

    <FlatList
            {...rest}
            data={items}
            bounces={false}
            scrollEnabled={scrollEnabled}
            initialized={initialized}
            keyExtractor={(item, index) => `${item.id}`}
            renderItem={({ item }) => (
              <Card
                setScrollEnabled={setScrollEnabled}
                item={item}
              />
            )}
          />

    const Card = ({item} => {
     return (
           <TouchableHighlight
                onPressOut={() => {
                  setScrollEnabled(true)
                }}
                onPressIn={() => {
                  setScrollEnabled(false)
                }}
              >
               <View style={{height: 175, width: 100%}}>
                   <MapInsideOfReactNativeWebView />
               </View>
           </TouchableHighlight>
           .... rest of the information about the item
    
      )
    
    }

Any suggestions on ways forward?