Why does nesting my modal in a MapView turn a 1 finger gesture into 3 finger gesture?

For context, what led me to this bug was trying to make it so my modal would disappear when tapping outside of the custom view inside the modal.

Using react-native-modal and what you see below, I achieved this goal. However, when I tried to overlay this modal on top of a map, I discovered it no longer worked unless I tapped with 3 fingers.

I have no idea why this occurs. I have an example here on snack expo so if you have the expo go app you can see for yourself. If you do not have the app, you can use the built in emulators but I am not sure you can recreate 3 simultaneous taps. Remove the MapView and you can see it works with a single tap.

How can I make it so it just takes a single finger tap rather than 3 simultaneous ones?

import MapView, { PROVIDER_GOOGLE, } from 'react-native-maps';
import Modal from "react-native-modal";


export default function App(){
  const [hideModal, setHideModal] = React.useState(false)

    return (
     <View style={{...StyleSheet.absoluteFillObject}}>
     <TouchableOpacity onPress={() => setHideModal(false)}>
          <Modal isVisible={hideModal}>
            <TouchableWithoutFeedback onPress={() => {}}>
                   <View style={{height: 200, width: 100, backgroundColor: 'red'}}></View>
            </TouchableWithoutFeedback>
          </Modal>
      </TouchableOpacity>
      <MapView
        provider={PROVIDER_GOOGLE}
        style={styles.map}>


        <View style={{position: 'absolute', top: 100, left: 100}}>
        <TouchableOpacity onPress={() => setHideModal(true)}>
        <Text style={{fontWeight: 'bold', color: 'pink', fontSize: 26}}>Click me for modal</Text>
        </TouchableOpacity>
        </View>
      </MapView>

      </View>
    );
  }

const styles = StyleSheet.create({
    map: {
      ...StyleSheet.absoluteFillObject
    },
})

try this

import * as React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import MapView from 'react-native-maps';
import Modal from 'react-native-modal';

export default function App() {
  const [showModal, setShowModal] = React.useState(false);

  return (
    <View style={{flex: 1}}>
      <Modal isVisible={showModal} onBackdropPress={() => setShowModal(false)}>
        <View style={{height: 200, width: 100, backgroundColor: 'red'}} />
      </Modal>
      <MapView provider={undefined} style={styles.map}>
        <View style={{position: 'absolute', top: 100, left: 100}}>
          <TouchableOpacity onPress={() => setShowModal(true)}>
            <Text style={{fontWeight: 'bold', color: 'pink', fontSize: 26}}>
              Click me for modal
            </Text>
          </TouchableOpacity>
        </View>
      </MapView>
    </View>
  );
}
const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

Modal have onBackdropPress