Problems with type checking Routes on Navigators in React Navigation 5

This code is basically derived from the Expo tabs default template. To implement TypeScript in it I followed the manual Type Checking with TypeScript on the React Navigation site. But I can't get it quite right.

Here's the code:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import * as React from 'react';import { RouteProp } from '@react-navigation/native';import { StackNavigationProp } from '@react-navigation/stack';import TabBarIcon from '../../components/TabBarIcon';import HelpScreen from '../../screens/shared/HelpScreen';import HomeStack from './HomeStackNavigator';const INITIAL_ROUTE_NAME = 'Home';type BottomTabNavigatorParamList = {  Home: undefined;  Help: undefined;};type BottomTabNavigatorRouteProp = RouteProp<BottomTabNavigatorParamList, 'Home'>;type BottomTabNavigatorNavigationProp = StackNavigationProp<BottomTabNavigatorParamList, 'Home'>;type Props = {  route: BottomTabNavigatorRouteProp;  navigation: BottomTabNavigatorNavigationProp;};const BottomTab = createBottomTabNavigator<BottomTabNavigatorParamList>();const BottomTabNavigator = ({ navigation, route }: Props): JSX.Element => {  navigation.setOptions({ headerTitle: getHeaderTitle(route) });  return (<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}><BottomTab.Screen        name="Home"        component={HomeStack}        options={{          title: 'Home Screen',          tabBarIcon: ({ focused }): JSX.Element => <TabBarIcon focused={focused} name="cpu" />,        }}      /><BottomTab.Screen        name="Help"        component={HelpScreen}        options={{          title: 'Help',          tabBarIcon: ({ focused }): JSX.Element => (<TabBarIcon focused={focused} name="help-circle" />          ),        }}      /></BottomTab.Navigator>  );};function getHeaderTitle(route: BottomTabNavigatorRouteProp): string {  const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;ERRORS HERE =====>        ^^^^^               ^^^^^     <===== ERRORS HERE  switch (routeName) {    case 'Home':      return 'How to get started';    case 'Help':      return 'How to use';    default:      if (__DEV__) {        // eslint-disable-next-line no-console        console.log('Should not happen');      }      break;  }  return '';}export default BottomTabNavigator;

I am getting the following error in the function getHeaderTitle error:

TS2339: Property 'state' does not exist on type 'Pick "Home">, "key" | "name">'