"Render Error. withNavigation can only be used on a view hierarchy of a navigator. The wrapped component is unable to get access to navigation from props or context" When I try to navigate to PrEntery where I have a FlatList it is giving me this error. When I replace the FlatList with just multiple components navigation works fine.

//App.js
const MainStackScreen = () => {
  return (
    <NavigationContainer>
      <MainStack.Navigator
        screenOptions={{headerShown: false}}
        >
        <MainStack.Screen name = "Home" component ={Home}/>
        <MainStack.Screen name = "PrEntery" component = {PrEntery}/>
      </MainStack.Navigator>
    </NavigationContainer>
  );
};
export default MainStackScreen;

//Home.js
const Home = ({navigation}) => {
    return(
        <View style = {{height:'100%',width:'100%',backgroundColor:'#141212'}}>

        <SafeAreaView>
            <View style={{marginTop:200}}>
                <TouchableOpacity onPress={()=>{
            navigation.navigate('PrEntery')
        }}>
                    <HomeButton text = 'Enter PR'/>
                </TouchableOpacity>
            </View>
            <View style={{marginTop:40}}>
                <TouchableOpacity>
                    <HomeButton text = 'Record Book'/>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
        </View>
    );
};
export default Home;

//PrEntery.js
const renderItem = ({index}) => {
        return(
            <EnterPr text = {index}/>
        );
    };
const PrEntery = () => {
    
    return(
        <View style = {{height:'100%',width:'100%',backgroundColor:'#141212'}}>

        <SafeAreaView>
        <FlatList
            data={LIFTS}
            renderItem = {renderItem}
        />
        

        </SafeAreaView>
        </View>
    );
    };

export default PrEntery;