React Native Navigation : Navigate to another Stack Navigation (Nested)

I'm trying since few hours to navigate from a StackNavigation to another Stack navigation.
I'm using typescript and this is not easy to define right types for all screens.

I made the exemple below of my error.
In this case, when my application start, the first screen is ProfilHome.
In this screen I have two button :

• One to go to another screen of my current stackNavigation ProfilInfo
• Another to go to another Stacknavigation MarketStack and the screen MarketInfo

When i click on the first button, there is no problem. but when I click on the second button I got the error :

The action 'NAVIGATE' with payload {"name":"MarketInfo"} was not handled by any navigator.Do you have a screen named 'MarketInfo'?

Error code :

import * as React from 'react'import {View, Text, Button} from 'react-native'import { ReactElement } from 'react'import {createStackNavigator, StackNavigationProp, StackScreenProps} from '@react-navigation/stack'import {useNavigation} from "@react-navigation/native";//**********************//// Profile component//**********************//type ProfileNavigationStack = {    ProfilHome: undefined,    ProfilInfo: undefined,}type ProfileHomeNavProps = StackScreenProps<ProfileNavigationStack, 'ProfilHome'>const ProfileStack = createStackNavigator<ProfileNavigationStack>()const ProfileComponent = () => {    return (<ProfileStack.Navigator><ProfileStack.Screen                options={{ headerTitle: 'ProfilHome' }}                name="ProfilHome"                component={ProfileHome}            /><ProfileStack.Screen                options={{ headerTitle: 'ProfilInfo' }}                name="ProfilInfo"                component={ProfileInfo}            /></ProfileStack.Navigator>    )}const ProfileHome = ({ navigation }: ProfileHomeNavProps) => {    const navToMarket = useNavigation<MarketHomeNavProps>()    return (<View><Text>ProfileHome</Text><Button title={'goToInfo'} onPress={() => navigation.navigate('ProfilInfo')}/><Button title={'goToMarket'} onPress={() => navToMarket.navigate('MarketInfo')}/></View>    )}const ProfileInfo = () => (<View><Text>ProfileInfo</Text></View>)//**********************//// Market component//**********************//type MarketNavigationStack = {    MarketHome: undefined,    MarketInfo: undefined,}type MarketHomeNavProps = StackNavigationProp<MarketNavigationStack, 'MarketHome'>const MarketStack = createStackNavigator<MarketNavigationStack>()const MarketComponent = () => {    return (<MarketStack.Navigator><MarketStack.Screen                options={{ headerTitle: 'ProfilHome' }}                name="MarketHome"                component={MarketHome}            /><MarketStack.Screen                options={{ headerTitle: 'MarketInfo' }}                name="MarketInfo"                component={MarketInfo}            /></MarketStack.Navigator>    )}const MarketHome = () => (<View><Text>MarketHome</Text></View>)const MarketInfo = () => (<View><Text>MarketHome</Text></View>)//**********************//// Main component//**********************//type HomeNavigationStack = {    Profile: undefined,    Market: undefined,}const HomeStack = createStackNavigator<HomeNavigationStack>()export default function StartApp(): ReactElement {    return (<HomeStack.Navigator            screenOptions={{                headerShown: false,            }}><HomeStack.Screen                name="Profile"                component={ProfileComponent}            /><HomeStack.Screen                name="Market"                component={MarketComponent}            /></HomeStack.Navigator>    )}

I think the solution is here but I don't understand how it's really works.

Can someone help me ?

Thanks