Navigation is undefined in Drawer Content

I am currently trying to build a React Native project using typescript. My screens are configured as follows:

export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {    return (<NavigationContainer linking={LinkingConfiguration} theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}><DrawerNavigator /></NavigationContainer>    );}const Drawer = createDrawerNavigator<DrawerStackParamList>();function DrawerNavigator() {    const navigation = useNavigation<NavigationProps>();    return (<Drawer.Navigator drawerContent={() => <DrawerContent navigation={navigation} />}><Drawer.Screen name='Root' component={RootNavigator} /><Drawer.Screen name='ManageCities' component={ManageCities} /></Drawer.Navigator>    );}const Stack = createStackNavigator<RootStackParamList>();function RootNavigator() {    return (<Stack.Navigator><Stack.Screen name='Root' component={BottomTabNavigator} options={{ headerShown: true, headerLeft: () => <Header /> }} /><Stack.Screen name='NotFound' component={NotFoundScreen} options={{ title: 'Oops!', headerShown: true, headerLeft: () => <Header /> }} /></Stack.Navigator>    );}function Header() {    const navigation = useNavigation<NavigationProps>();    return <Ionicons size={30} name='ios-menu' color='white' onPress={() => navigation.toggleDrawer()} />;}

Drawer Content:

import React, { FunctionComponent } from 'react';import { View } from '../components/Themed';import { DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer';import { NavigationProps } from '../types';type DrawerContentProps = {    navigation?: NavigationProps;};const DrawerContent: FunctionComponent<DrawerContentProps> = ({ navigation }) => {    const arr = ['city1', 'city2'];    return (<View style={{ flex: 1 }}><DrawerContentScrollView>                {arr.map(                    (value): JSX.Element => {                        return <DrawerItem key={value} label={value} onPress={() => console.log(value)} />;                    },                )}<DrawerItem label='Manage Cities' onPress={() => navigation!.navigate('ManageCities')} /></DrawerContentScrollView></View>    );};export default DrawerContent;

when I try to run the application, I get the following error:

Error: Couldn't find a navigation object. Is your component inside a screen in a navigator?This error is located at:    in DrawerNavigator    in EnsureSingleNavigator (created by ForwardRef(BaseNavigationContainer))    in ForwardRef(BaseNavigationContainer) (created by ForwardRef(NavigationContainer))    in ThemeProvider (created by ForwardRef(NavigationContainer))    in ForwardRef(NavigationContainer) (created by Navigation)    in Navigation (created by App)    in RNCSafeAreaProvider (created by SafeAreaProvider)    in SafeAreaProvider (created by App)    in App (created by ExpoRoot)    in ExpoRoot    in RCTView (created by View)    in View (created by AppContainer)    in DevAppContainer (created by AppContainer)    in RCTView (created by View)    in View (created by AppContainer)    in AppContainer

I also tried to use the useNavigation hook inside the drawer content as well but came across with the same error.

Actually my initial problem was that I couldn't figure out how to pass the navigation as a prop to DrawerNavigator. When using Javascript, you can pass props and it has navigation inside by default. However, in Typescript it complains that props are not defined and I couldn't figure out how to pass it initially.