How to use this.props.navigation.openDrawer () in a class component without having to pass props to it from parent?

I have this component:

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>
        )
    }
}

And I want to call it from my main file like this:

<HeaderBar/>

But he forces me to pass him like this:

<HeaderBar navigation={}> </HeaderBar>

I'm new to React and I don't have much idea how it works, how can I fix it? I am using typscript.

This is my 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>
        )
    }
}