route.params issue, "Object is possibly 'undefined'"with React-navigation/native and Typescript

I am getting Typescript tell me "route.params.TextNode" in the DetailsScreen is possibly undefined, it works but am I doing something wrong?Sorry about the chunk of code, I just not sure where the issue could be!

Here are my type declarations.

export type RootTabParamList = {    Settings: undefined;    //Search: undefined;};export type SettingsStackParamList = {    Settings: undefined;    Details: { TestNote: string };};export type SettingsRouteProp = RouteProp<RootTabParamList, 'Settings'>;export type SettingsScreenNavigationProp = CompositeNavigationProp<                                StackNavigationProp<SettingsStackParamList, 'Details'>,                                 BottomTabNavigationProp<RootTabParamList, 'Settings'>>;export type SettingsProps = {    navigation: SettingsScreenNavigationProp;    route: SettingsRouteProp;  };

Here are the navigators.

const Tab = createBottomTabNavigator<RootTabParamList>();export default function App() {    const scheme = useColorScheme();    return (<AppearanceProvider><NavigationContainer theme={scheme === 'dark' ? MyDarkTheme : MyLightTheme}><Tab.Navigator initialRouteName="Search"                                                 tabBarOptions={{ activeTintColor: 'tomato',                                                 inactiveTintColor: '#650900',                                }}>                    {/* <Tab.Screen name="Search" component={SearchStackScreen} /> */}<Tab.Screen name="Settings" component={SettingsStackScreen} /></Tab.Navigator></NavigationContainer></AppearanceProvider>  );}const SettingsStack = createStackNavigator<SettingsStackParamList>();function SettingsStackScreen() {  return (<SettingsStack.Navigator><SettingsStack.Screen name="Settings" component={SettingsScreen} /><SettingsStack.Screen name="Details" component={DetailsScreen} /></SettingsStack.Navigator>  );}function DetailsScreen({ route, navigation }: SettingsProps) {    return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text style={{color: 'red'}}>{route.params.TextNode}</Text></View>    );  }function SettingsScreen({ route, navigation }: SettingsProps) {    return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Settings screen</Text><Button          title="Go to Details"          onPress={() => navigation.navigate('Details', { TestNote: "TestHey" })}        /></View>    );  }