Navigation to another stack bottomNavigation react-native-paper

don't know how to navigate to another stack using react-native-paper and react-navigation

function RootStack(): JSX.Element {  return (<NavigationContainer><Stack.Navigator        screenOptions={{          presentation: 'transparentModal',          headerShown: false        }}><Stack.Screen            name={'BottomStack'}            component={BottomStack}          /></Stack.Navigator></NavigationContainer>  )} 

BottomStack with react-native-paper

import { BottomNavigation, Text } from 'react-native-paper'const BottomStack = (): JSX.Element => {  const [index, setIndex] = useState(0)  const [routes] = useState([    {      key: 'home',      title: 'Home',      focusedIcon: 'home',      unfocusedIcon: 'heart-outline'    },    { key: 'jobs', title: 'Jobs', focusedIcon: 'album' }  ])  const renderScene = BottomNavigation.SceneMap({    home: HomeStack,    jobs: JobsStack  })  return (<BottomNavigation      navigationState={{ index, routes }}      onIndexChange={setIndex}      renderScene={renderScene}    />  )}

HomeStack - JobsStack is similar

import { createNativeStackNavigator } from '@react-navigation/native-stack'const Stack = createNativeStackNavigator()function HomeStack(): JSX.Element {  return (<Stack.Navigator initialRouteName={Routes.HOME}><Stack.Screen name={'Home'} component={Home} /></Stack.Navigator>  )}

When I select the Jobs tab I get this error:

How do I solve it?