Separate gestures on a nested component and parents

Question

Would it be possible to have a nested child with gestures not interfering with parents gestures.

So my screen is composed of :

1. Stack Navigator with swipe back enabled
2. Flatlist with pull to refresh enabled
3. An interactive map in the header of the Flatlist

const data: any[] = ['one', 'two', 'three'];

const MainScreen = () => {
  const renderItem = () => {
    return null;
  };

  const refreshControl = (
    <RefreshControl refreshing={false} onRefresh={() => {}} />
  );

  const header = (
    <MapView
      region={{
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0,
        longitudeDelta: 0,
      }}
    >
      <Marker coordinate={{ latitude: 0, longitude: 0 }} />
    </MapView>
  );

  return (
    <FlatList
      data={data}
      ListHeaderComponent={header}
      refreshControl={refreshControl}
      renderItem={renderItem}
    />
  );
};

const App = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            gestureEnabled: true,
            gestureDirection: 'horizontal',
          }}
        >
          <Stack.Screen name="MainScreen" component={MainScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
  );
};

It looks like this (with areas where gestures are active)

Schema of the screen

The problem is when I interact with the map (the green square on the top) all other gestures start to interfece like PTR when I pan down. Or go back when I pinch horizontally.

So looking at the third picture, is it possible to separate all gestures outside yellow border and inside.

What I've tried so far :

1. Disable pull to refresh, swipe back while gesture on map is active. But it's just mere workaround.
2. Use of PointerEvents to disable gestures on a child. But it just disables all interactions on the element.