How do you type a react-navigation navigator with typescript when it can accept params

I am trying to type a React-Navigation (v6) navigator which can accept a param. But I'm facing an issue and I cannot figure out what the problem is.

What I want is to be able to call my navigator Wizard with params and without params. This is my need:

   navigation.navigate('Wizard');   navigation.navigate('Wizard', { pageId: 123 });   navigation.navigate('Wizard', { screen: 'WizardOne' });

I have created my types and it looks like this, with the 3 options

export type AppNavigatorParamList = {   // ...   Wizard:    | {        pageId: number;      }    | NavigatorScreenParams<WizardNavigatorParamList>    | undefined;}export type WizardNavigatorParamList = {  WizardOne: undefined;  WizardTwo: undefined;};

And this is how I try to access the param:

  const route = useRoute<RouteProp<AppNavigatorParamList, 'Wizard'>>();  const pageId = route.params?.pageId;

But for some reason, TypeScript keeps complaining about my types. It doesn't find the option where I can just pass the pageId.

error TS2339: Property 'pageId' does not exist on type 'Readonly<{ screen?: undefined; ...

These 2 work:

   navigation.navigate('Wizard');   navigation.navigate('Wizard', { screen: 'WizardOne' });

But not this one:

   navigation.navigate('Wizard', { pageId: 123 });

However, if I remove the type NavigatorScreenParams<WizardNavigatorParamList> then the one with pageId works fine.

What's going on and how can I resolve this?