Custom Component with <PanGestureHandler/> not work when used in React Navigation

Current Behavior

I'm trying to create a modal component with of gesture handler,

Here's my CustomComponent.js:

import React from 'react';
import {View, Dimensions, Text, TouchableOpacity, Animated, TextInput, Modal, FlatList} from 'react-native';
import {PanGestureHandler, gestureHandlerRootHOC, State} from 'react-native-gesture-handler';

const {width, height} = Dimensions.get('window');

export default class CustomComponent extends React.Component {
  constructor(props) {
    console.log('prop', props);
    super(props);
    this.state = {
      translateY: new Animated.Value(0),
      isModalOpen: false
    };
  }

  openModal() {
    this.setState({isModalOpen: true});
  }

  closeModal() {
    this.setState({isModalOpen: false});
  }

  handleGesture = (e) => {
    this.state.translateY.setValue(e.nativeEvent.translationY);
  };

  handlerChange = (e) => {
    if (e.nativeEvent.oldState === State.ACTIVE) {
      this.state.translateY.setValue(0)
    }
  };

  renderModalContent = gestureHandlerRootHOC(() => (
    <View style={{flex:1, justifyContent:'center', backgroundColor:'rgba(0,0,0,0.5)'}}>
      <PanGestureHandler
        onGestureEvent={this.handleGesture}>
        <Animated.View style={{alignItems: 'center', paddingVertical: 14, transform:[{translateY:this.state.translateY}] }}>
          <View
            style={{
              width: 80,
              height: 8,
              backgroundColor: 'red',
              borderRadius: 4,
            }}
          />
        </Animated.View>
      </PanGestureHandler>
    </View>
  ));

  render() {
    return (
      <View style={{flex: 1}}>
        <Modal visible={this.state.isModalOpen} transparent={true} onRequestClose={()=>this.closeModal()}>
          {this.renderModalContent()}
        </Modal>
        <TouchableOpacity onPress={() => this.openModal()}>
          <Text>Open Modal</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

and in App.js if i used CustomComponent directly, it work as expected:

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <CustomComponent/>
    </View>
  );
}
const Stack = createStackNavigator();
function App() {
  return(<HomeScreen/>) //work as expected for PanGestureHandler
}
export default App;

but it doesn't work if CustomComponent wrapped in React Navigation:

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <CustomComponent/>
    </View>
  );
}
const Stack = createStackNavigator();
function App() {
  return ( // doesn't work, PanGestureHandler `onGestureEvent` props doesn't fire
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Expected Behavior

Want to fire even in NavigationContainer

How to reproduce

https://snack.expo.io/AW1BDdF_G (I don't know expo cannot drag my component)

Your Environment

Beginne mit den CustomComponent.js- und App.js-Beispielen im Issue und vergleiche dann das direkte Rendern mit dem Fall mit NavigationContainer und Stack.Navigator. Reproduziere das Android-Verhalten mithilfe des verlinkten Snacks und überprüfe, ob PanGestureHandler's onGestureEvent in beiden Setups ausgelöst wird; abgeschlossen bedeutet, dass die von der Navigation umschlossene Komponente konsistent reagiert.