Why route object sometimes have state and sometimes don’t – in react-navigation v5

Start:

<NavigationContainer>
      <Stack.Navigator>
        {
          isLoading ? <Stack.Screen name="AuthLoadingScreen" component={AuthLoadingScreen} />
          : (
          user ? (
            <Stack.Screen  name="AuthenticatedStack" component={AuthenticatedStack} options={{headerShown: false}} />
            ) : (
              <Stack.Screen  name="NotAuthenticatedStack" component={NotAuthenticatedStack} options={{headerShown: false}} />
            )
          )
        }
      </Stack.Navigator>
    </NavigationContainer>

Authenticated stack:

const AuthenticatedStack = () => {
  return (
    <Drawer.Navigator initialRouteName="MainStack" drawerContent={props => <SideBar {...props} />}>
        <Stack.Screen name="MainStack" component={MainStack} options={({route}) => ({
            headerShown: shouldHeaderBeShown(route),title: getHeaderTitle(route),
          })} />
      </Drawer.Navigator>
  );
};

Main stack contain main screen with tab navigator and other navigators which I plan to navigate to from side menu buttons:

const MainStack = () => {
  return (
    <Stack.Navigator>
          <Stack.Screen name="main" component={MainTabNavigator} options={({route}) => ({
            headerShown: shouldHeaderBeShown(route),title: getHeaderTitle(route),
          })} />
          <Stack.Screen options={({route}) => ({
            title: getHeaderTitle(route),
          })} name="Welcome" component={WelcomeStack} />
        </Stack.Navigator>
  );
};

Main tab navigator is just few tabs:

const MainTabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
...

Home stack navigator:

const HomeStackNavigator = ({navigation, routes}) => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} options={{
          headerLeft: () => (),
        }} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
};
Welcome stack:
const WelcomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen options={({route}) => ({
        headerShown: shouldHeaderBeShown(route),title: getHeaderTitle(route),
      })} name="welcome" component={WelcomeScreen} />
    </Stack.Navigator>
  );
};

I use this two function to show hide header to avoud double headers on tabs and to set titles:

function shouldHeaderBeShown(route) {
  const routeName = route.state ? route.state.routes[route.state.index].name : 'Home';

  switch (routeName) {
    case 'Home': return false;
  }
}

function getHeaderTitle(route) {
  const routeName = route.state ? route.state.routes[route.state.index].name : 'Home';

  switch (routeName) {
    case 'Home': return 'Home';
    case 'Settings': return 'Settings';
    case 'Welcome': return 'Welcome';
  }
}

And here I got to the problem:
This line: route.state ? route.state.routes[route.state.index].name if I switch between tabs I get all correctly state property is there and it’s fine titles are set.
But If I from drawer navigate to Welcome then route doesn’t have state property so it always pick ‘Home’ for title.
I pass this by making this line to:

const routeName = route.state ? route.state.routes[route.state.index].name : route.name;

Then it is showing Welcome title.
But I don’t understand is this workaround ok or this screens can be set in a better way?

Source: ReactJs