tl;dr: Although it works in the emulator, typescript gives me a strange error on react navigations nav.popTo function. Please help me figure out how to get rid of the error.

This is my navigation setup:

const rootStack = createNativeStackNavigator({
    screens: {
        [homeRoute.route]: homeRoute.page,
        [diaryRoute.route]: diaryRoute.page,
    },
});

// Note: this is then used in the default App file as the sole component
export const Navigation = createStaticNavigation(rootStack);

/*
 * Setup of Typescript support with React Navigation
 */
export type RootStackParamList = StaticParamList<typeof rootStack>;
export type StackNavType = NativeStackNavigationProp<RootStackParamList>;

declare global {
    namespace ReactNavigation {
        interface RootParamList extends RootStackParamList {}
    }
}

And these are the two pages:

home.tsx

type Props = StaticScreenProps<{
    demo?: string;
}>;

export const HomePage: FC<Props> = ({ route }) => {
    const nav = useNavigation();
    const [val, setVal] = useState('No Value');

    useEffect(() => {
        if (route.params?.demo) {
            setVal(route.params.demo);
        }
    }, [route.params?.demo]);

    return (
        <Page>
            <Text>Value: {val}</Text>
            <Pressable onPress={() => nav.navigate(diaryRoute.route)}>
                <Text>Go to Diary</Text>
            </Pressable>
        </Page>
    );
};

export const homeRoute: PageRoute = {
    route: 'home',
    title: 'Home',
    page: HomePage,
} as const;

diary.tsx

export const DiaryPage: FC = () => {
    const nav = useNavigation<StackNavType>();

    return (
        <Page>
            <Pressable
                onPress={() =>
                    nav.popTo(homeRoute.route, { demo: 'DEMODEMO' })
                }>
                <Text>Go back to Home</Text>
            </Pressable>
        </Page>
    );
};

export const diaryRoute: PageRoute = {
    route: 'diary',
    title: 'Diary',
    page: DiaryPage,
} as const;

I am trying to pass a value from the diary screen to the home screen, just as described in the docs (). It also works just fine in my emulator, but typescript marks the line nav.popTo(homeRoute.route, { demo: 'DEMODEMO' }) as wrong, giving me the following error message:

Argument of type '[string, { demo: string; }]' is not assignable to parameter of type '[screen: string] | [screen: string, params: { screen?: undefined; params?: undefined; initial?: undefined; path?: string | undefined; state: Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: NavigationRoute<...>[]; type: string; stale: false; }> | PartialState<...>...'.
  Type '[string, { demo: string; }]' is not assignable to type '[screen: string, params: { screen?: undefined; params?: undefined; initial?: undefined; path?: string | undefined; state: Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: NavigationRoute<...>[]; type: string; stale: false; }> | PartialState<...> | undefined; } | u...'.
    Type '[string, { demo: string; }]' is not assignable to type '[screen: number, params: { screen?: undefined; params?: undefined; initial?: undefined; path?: string | undefined; state: Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: NavigationRoute<...>[]; type: string; stale: false; }> | PartialState<...> | undefined; } | u...'.
      Type at position 0 in source is not compatible with type at position 0 in target.
        Type 'string' is not assignable to type 'number'.ts(2345)

I fail to understand why typescript is bothering me like this. Could it be because of my dynamically assigned routes? Please help me get rid of this error.

My tsconfig:

{
    "extends": "@react-native/typescript-config/tsconfig.json"
}