Why my Nested Stack goes to the first screen, despite what the docs says React Navigation, React Native - ANSWER INSIDE

ANSWER: you should do inside the Stack.Screen of the nested Navigator options={{headerShown:false}}

like this:

<Stack.Screen name="NestedNav" component={Nested_Navigator} options={{headerShown: false}} />

I started learning React-Native, I was reading the docs, and it sent me to React-Navigation docs. according to the docs if I have Nested navigators each navigator stack will have it's own stack history,

from the docs:

"For example, when you press the back button inside a nested stack navigator,
 it'll go back to the previous screen inside the nested stack even if there's 
another navigator as the parent."

I have a nested stack navigator, but two things happen, the first (when inside the parent I only have the screen that has the nested navigator), is the I don't get the default back button. the second, if I display the screen with the nested stack navigators, I do get the back button, but it returns to the first screen. (where I call the nested navigators from)

my code: this is the very first screen of the app e

xport default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home" screenOptions={{  headerStyle: {backgroundColor:'#f4511e'}, headerTintColor:'#fff',headerTitleStyle:{fontWeight:'bold'},headerTitleAlign:'center' , headerBackTitleVisible:false}}>
        <Stack.Screen name="Home" component={HomeScreen} options={({navigtion, route}) => ({headerTitle: props=><Screen_Image_Header/> }) } initialParams={{ownTitle: "MY DAMNED TITLE"}}/>
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title:"" }}  />
        <Stack.Screen name="CreatePost" component={CreatePostScreen} options={ ({route}) => ({title: route.params.name}) }/>
        <Stack.Screen name="NestedNav" component={Nested_Navigator} /> -- this is the screen with nested nav
      </Stack.Navigator>
    </NavigationContainer>
  )
}

the nested nav screen code:

const Tab = createStackNavigator();

export default function Nested_Navigator() {
    return (
        <Tab.Navigator initialRouteName="Feed">
            <Tab.Screen name="Feed" component={Feed_Nest_Tab} options={{ title: "Hello" }} />
            <Tab.Screen name="Messages" component={Messages_Nest_Tab} />
        </Tab.Navigator>
    )
}

the Home screen (the first to be displayed):

export default function HomeScreen({ route, navigation }) {
 return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: "center" }}>
        <Text>{JSON.stringify(ownTitle)}</Text>
        <Button title="Go To Details" onPress={() => navigation.navigate('Details', { itemId: 86, otherParam: 'just some other param' })} />
        <Button title="Create Post" onPress={() => navigation.navigate('CreatePost', { name: "Are Ya winning song?" })} />
        <Button title="Update the Screen Title" onPress={() => navigation.setOptions({ title: 'Updated!' })} />
        <Button title="Go to Nestned Stack" onPress={()=> navigation.navigate('NestedNav')} />
        <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
        <Text>Count: {count}</Text>
    </View>
)

}

the two nested Screens:

export default function Feed_Nest_Tab({route, navigation}) {
    return (
        <View>
            <Text>Hello From Feed Tab</Text>
            <Button title="Go to messages" onPress={()=> (navigation.navigate('Messages')) } />
        </View>
    )
}

export default function Messages_Nest_Tab({route, navigation}) {
    return (
        <View>
            <Text>Hello from Messages Tab</Text>
        </View>
    )
}

the docs: https://reactnavigation.org/docs/nesting-navigators