React Native navigation doesn't render component after changing the route - react-native

Question

I created this simple React Native app from scratch but I am having trouble getting simple stacked navigation to work. I don't get any console exception but what happens is the page doesn't change. It still renders the same home component.
Setup:
export default function Index() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home} options={{
title: "overview"
}} />
<Stack.Screen name="About" component={About} />
</Stack.Navigator>
</NavigationContainer>
);
}
Home component:
export function Home() {
return (
<View style={styles.container}>
<Text>Welcome!</Text>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to About"
onPress={() => {
navigation.navigate('About')
}}
/>
</View>
</View>
);
}
Initial page:
After clicking on go to about page:

Answer 1

try importing the navigation from props as the following and retest:
export function Home({navigation}) {
return (
<View style={styles.container}>
<Text>Welcome!</Text>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to About"
onPress={() => {
navigation.navigate('About')
}}
/>
</View>
</View>
);
}
And if this doesn't solve your problem or that's how you already have done it but didn't write all the code then
please show all your code, as well as the About screen code