How to type check react navigation nested navigation

I'm trying to understand react navigation docs to type check nesting navigators.This is how my structure looks like.

- BottomTabs:    - HomeStack:        - Home        - Details    - ProfileStack        - Profile        - Settings

My bottomTab has this type:

type BottomTabNavigatorParamsList = {  homeStack: HomeStackParamsList;  profileStack: ProfileStackParamsList;};

Each screen of each stack has it's own type too.

I want to navigate from DetailsScreen to SettingsScreen (from HomeStack to ProfileStack).

I've tried to navigate using the CompositeNavigationProp in the DetailsScreen:

const navigation = useNavigation<   CompositeNavigationProp<     StackNavigationProp<HomeStackParamsList, "Details">,     StackNavigationProp<ProfileStackParamsList>>>();

but, if the ProfileStack is not rendered, then I get an exception:

The action 'NAVIGATE' with payload {"name":"Settings"} was nothandled by any navigator.

Do you have a screen named 'Settings'?

If I switch to the Profile tab, before navigating, then go back to the DetailsScreen and tap to navigate, then it will work.

Also, using just:

const navigation = useNavigation();navigation.navigate("Settings");

will also work, but I get a typescript error check (since I'm not setting useNavigation).

So, basically I want to know how to type check this kind of nesting navigators, I feel like React Navigation docs is not clear at all.

Ref.: https://reactnavigation.org/docs/typescript#nesting-navigators

Does anyone know how to do it?

UPDATE

If I set the type of the profileStack to NavigatorScreenParams<ProfileStackParamsList> I get rid off the typescript error check. The problem I have now is that Profile tab does not get rendered, so when I navigate, I don't have the goback available to navigate to the initial screen (ProfileScreen in this case)