RN - navigation with typescript passing params

I'm trying to create a minimal working example for an app with common navigation usege with typescript. Just to use it as reference for future projects. To be honest I'm struggling a bit to understand the navigation w/ typescript documentation so am a bit improvising here. Basic idea is to create a structure where you navigate to some screens with no navigation params, some other screens require 1 or 2 navigation params to be passed on.

App.tsxSome screens will require no params some will require 1 or 2 params.

 export type RootStackParamList = {      Dashboard: undefined;      Miscs: { miscsParam: string };      CounterTypeRedux: undefined;      ReanimatedScreens: undefined;      Profile: {        profileParam: string;        userId: string;      };    };    const App = () => {      const Stack = createNativeStackNavigator<RootStackParamList>();      return (<Provider store={store}><NavigationContainer><Stack.Navigator><Stack.Screen name="Dashboard" component={Dashboard} /><Stack.Screen name="Miscs" component={Miscs} /><Stack.Screen name="CounterTypeRedux" component={CounterTypeRedux} /><Stack.Screen                name="ReanimatedScreens"                component={ReanimatedScreens}              /><Stack.Screen name="Profile" component={Profile} /></Stack.Navigator></NavigationContainer></Provider>      );    };

Dashboard.tsxHere I have a number of 'Tile' components to navigate to particular screens. Again it's a mixture of cases where no navigation params are being passed, some navigation params are being passed. The params' number is deliberately misspelled and the the shape of params object is incorrect (in comparison to what was defined in App.tsx)

const Dashboard: React.FC = () => {  return (<View style={styles.container}><Text>Dashboard with links to particular screens</Text><Tile copy="Counter" target="CounterTypeRedux" /><Tile copy="Reanimated" target="ReanimatedScreens" /><Tile        copy="Miscellaneous"        target="Miscs"        navigationParams={{ wrongParam: 29, bc: 32 }}      /><Tile        copy="Profile"        target="Profile"        navigationParams={{ misspelledParam: 23 }}      /></View>  );};

Tile.tsxThe tile component that takes 3 props: copy, target screen for navigation and optional navigationParam for the screens that require params being passed.

import { NativeStackNavigationProp } from '@react-navigation/native-stack';import { RootStackParamList } from '../../App';type Props = {  target: keyof RootStackParamList;  copy: string;  navigationParams?: {};};type genericScreenProp = NativeStackNavigationProp<  RootStackParamList,  Props['target']>;const Tile: React.FC<Props> = ({ target, copy, navigationParams }) => {  const navigation = useNavigation<genericScreenProp>();  return (<View><TouchableOpacity        onPress={() => navigation.navigate(target, navigationParams)}><Text>{copy}</Text></TouchableOpacity></View>  );};

Profile.tsx

accessing the params passed in route:

import { NativeStackNavigationProp } from '@react-navigation/native-stack';import { RootStackParamList } from '../../App';type Props = {  route: profileScreenProps;};type profileScreenProps = NativeStackNavigationProp<  RootStackParamList,'Profile'>;const Profile: React.FC<Props> = ({ route }) => {    const myParam = route.params?.misspelledParam;  return (<View><Text>This is the profile screen</Text></View>  );};

It all works in terms of actual navigating to the screen but there are a few problems:

1. When I pass incorrect params in the Tile component as navigationParams, nothing gets highlighted indicating there's an error (that they do not match what was defined in App.tsx for that particular screen;

2. When I console log route in the Profile screen, the object returned is:

   {"key": "Profile-b796IX16Vm4shxrSu6lF0", "name": "Profile", "params": {"misspelledParam": 23}, "path": undefined}

Should path be undefined?

3. In the Profile screen the:

   const myParam = route.params?.profileParam;

The params part gets highlighted with the following:

TS2339: Property 'params' does not exist on type 'profileScreenProps'.

4. In the Tile component the following gets highlighted as error:

It refers to navigationParams only. If I remove it leaving target, it doesn't indicate any error.

As you can see, I'm a bit confused about type checking here so I wouldn't be surprised if there were other problems with the code above.