typescript - Hur man använder this.props.navigation.openDrawer() i en klasskomponent utan att behöva skicka props till den från föräldern?

Jag har denna komponent:

class HeaderBar extends Component<Props> {
    render() {
        return (
            <View style={stylesHeaderBar.header}>
                <View style={stylesHeaderBar.menuIconContainer}>
                    <Icon name='menu' onPress={() => this.props.navigation.openDrawer()} />
                </View>
                <View style={stylesHeaderBar.titleAndLogoContainer}>
                    <Image style={stylesHeaderBar.image} source={require('../../assets/icon.png')} />
                    <Text> Restaurantes </Text>
                </View>
            </View>
        )
    }
}

Och jag vill kalla det från min huvudfil så här:

<HeaderBar/>

Men han tvingar mig att passera honom så här:

<HeaderBar navigation={}> </HeaderBar>

Jag är ny på React och jag har inte mycket idé om hur det fungerar, hur kan jag fixa det? Jag använder TypeScript.

Det här är min App.tsx:

class App extends Component {

    render() {
        return (
           <View style={{flex: 1}}>
               <HeaderBar navigation={this.props}></HeaderBar>
                <NavigationContainer>
                    <Drawer.Navigator>
                        <Drawer.Screen name='Pedidos' component={MainScreen}/>
                        <Drawer.Screen name='Historial' component={HistorialScreen}/>
                    </Drawer.Navigator>
                </NavigationContainer>
            </View>
        )
    }
}