When navigating to a stack, route state of this stack is undefined

Question

Packages used: @react-navigation/native 6.1.17 (also in v5) @react-navigation/stack 6.3.29 (also in v5) react-native-safe-area-context 4.5.0 react-native-screens 3.20.0 react-native-gesture-handler 2.9.0 react-native 0.72.6

I have a root stack and a nested stack.

const RootNavigator = () => (
  <RootStack.Navigator>
    <RootStack.Screen component={RootScreen} name="Screen" />
    <RootStack.Screen component={NestedNavigator} name="NestedStack" />
  </RootStack.Navigator>
);

Navigate from a screen within the root stack ("RootScreen") to a screen within the nested stack ("NestedStack").

navigation.navigate("NestedStack") or navigation.navigate("NestedStack", { screen: "NestedScreen1" }

doesn't make any difference.

Check the route.state of this stack. Use any method: getState, useNavigationState, getCurrentRoute, or the route prop, all give the same result.

const NestedNavigator = ({ route }) => {
  // here, currentRoute is defined, but currentRoute.state is undefined
  const currentRoute = useNavigationState((state) =>
    state.routes.find((route) => route.name === 'NestedStack')
  );

  return (
    <>
      // undefined
      <Text>Route state index: {route?.state?.index}</Text>
      // also undefined
      <Text>Route state index: {currentRoute?.state?.index}</Text>
      <NestedStack.Navigator>
        <NestedStack.Screen component={NestedScreen1} name="NestedScreen1" />
        <NestedStack.Screen component={NestedScreen2} name="NestedScreen2" />
      </NestedStack.Navigator>
    </>
  );
};

To get access to the state property I have to perform any navigation action within the nested stack.

The nested stack is rendered and so is a screen within the stack. The state property containing the name and index of the currently rendered route should already be accessible.

My questions are:

• Why is the "state" property undefined here?
• How can you get the state of the current navigator when "state" is undefined?