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

Start with the CustomComponent.js and App.js examples in the issue, then compare the direct render with the NavigationContainer and Stack.Navigator case. Reproduce the Android behavior using the linked Snack and verify whether PanGestureHandler's onGestureEvent fires in both setups; done means the navigation-wrapped component responds consistently.