How to properly type navigation passed as props with React-Navigation with expo

How do I properly type navigation passed as props to another component? As per the docs

Each screen component in your app is provided with the navigation prop automatically.

And also,

To type check our screens, we need to annotate the navigation prop and the route prop received by a screen.

type Props = NativeStackScreenProps<RootStackParamList, 'Profile'>;

I have a navigation component with router:

const App: React.FC = () => {  const [userMetrics, setUserMetrics] = useState<UserMetrics>(null);  const Stack = createNativeStackNavigator<RootStackParamList>();  return (<UserMetricsContext.Provider value={{ userMetrics, setUserMetrics }}><NavigationContainer><Stack.Navigator initialRouteName="Home"><Stack.Screen name="Home" component={Home} /><Stack.Screen name="Tests" component={Tests} /></Stack.Navigator></NavigationContainer></UserMetricsContext.Provider>  );};

And in Home screen I want to receive navigation prop to pass it down further to form which have a button that will navigate to Tests component and pass form data as params:

interface Props {  navigation: NativeStackScreenProps<RootStackParamList, "Home">;}export const Home: React.FC<Props> = ({ navigation }) => {  const { setUserMetrics } =    useContext<IUserMetricsContextType>(UserMetricsContext);  return (<View style={styles.container}><StatusBar style="auto" /><HealthCheckForm onSubmit={setUserMetrics} navigation={navigation} /></View>  );};

and now the problem starts to be visible in form component because typescript is assuming one level too much, I have typed the props like I did in the parent Home component like so:

interface Props {  onSubmit: React.Dispatch<React.SetStateAction<UserMetrics>>;  navigation: NativeStackScreenProps<RootStackParamList, "Home">;}

and typescript wants me to use it like so:

  const submitHandler = (data: UserMetrics) => {    onSubmit(data);    navigation.navigation.navigate("Tests", { userMetrics: data });    console.log(data);  };

This is not working however, the correct - working and navigating usage is

navigation.navigate("Tests", { userMetrics: data });

and when I navigate to the Tests component and pass the params along, I don't know how to receive them in Test component. I am trying to do it analogically like so:

interface Props {  navigation: NativeStackScreenProps<RootStackParamList, "Tests">;}export const Tests: React.FC<Props> = ({ navigation }) => {  const { userMetrics } =    useContext<IUserMetricsContextType>(UserMetricsContext);  console.log({ params: navigation.route.params });  return (<View><DisplayList /></View>  );};

And I get yet another error about reading properties of undefined.Thanks