Adding Back Button to Draw Navigator

Question

I'm trying to add a custom HeaderBackButton to my left header of my Drawer.Navigator.

The Drawer.Navigator looks like:

<Drawer.Navigator initialRouteName="Home" backBehavior="history" drawerContent={props => <CustomDrawer {...props} />} screenOptions={{
      headerStyle: {
        backgroundColor: "#38ACEC",
      },
      headerTintColor: "white",
      headerTitleStyle: {
        fontWeight: 'bold',
        fontSize: 20
      },
      drawerPosition: 'right',
      //headerTitle: "Lautanbahnungsapp",
      headerLeft: (navigation) => (
            <HeaderBackButton
                tintColor="white"
                onPress={() => navigation.goBack()}
            />
      ),
      headerRight: () => (
        <DrawerToggleButton tintColor='white'></DrawerToggleButton>
      )
    }}
    >

But when I click the Back Button on my header, I get the Error

TypeError: undefined is not a function, js engine: hermes

How can I use the goBack() Methode to do this? I also tried it using this.props.navigation.goBack() but that didnt work aswell.

And my whole App.js like:

import { StyleSheet, PixelRatio, StatusBar, Button } from 'react-native';
import Home from './sides/Home_Activity';
import Letters from './sides/Letters_Activity';
import Play from './sides/Play_Activity';
import Camera from './sides/Camera_Activity';
import Trainingsselection from './sides/Trainingsselection_Activity';
import Training from './sides/Training_Activity';
import TrainingsCamera from './sides/Trainingscamera_Activity';
import CustomDrawer from './components/CustomDrawer';
import Impressum from './sides/Impressum_Activity';
import { NavigationContainer } from '@react-navigation/native';
import { HeaderBackButton } from '@react-navigation/elements';
import { createDrawerNavigator, DrawerContent, DrawerToggleButton } from '@react-navigation/drawer';
import IconFeather from 'react-native-vector-icons/Feather';
import IconMaterialCommunity from 'react-native-vector-icons/MaterialCommunityIcons';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Octicons from 'react-native-vector-icons/Octicons';
import Icon from "react-native-vector-icons/Feather";

PixelRatio.getFontScale();
const Drawer = createDrawerNavigator();
StatusBar.setBarStyle('light-content', true);
StatusBar.setBackgroundColor("black");

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" backBehavior="history" drawerContent={props => <CustomDrawer {...props} />} screenOptions={{
          headerStyle: {
            backgroundColor: "#38ACEC",
          },
          headerTintColor: "white",
          headerTitleStyle: {
            fontWeight: 'bold',
            fontSize: 20
          },
          drawerPosition: 'right',
          //headerTitle: "Lautanbahnungsapp",
          headerLeft: (navigation) => (
                <HeaderBackButton
                    tintColor="white"
                    onPress={() => navigation.goBack()}
                />
          ),
          headerRight: () => (
            <DrawerToggleButton tintColor='white'></DrawerToggleButton>
          )
        }}
        >
        <Drawer.Screen name="Home" component={Home} options={{headerShown:true, headerLeft: false, drawerIcon: ({focused, size}) => ( <IconFeather name="home" size={size}/> ) }}/>
        <Drawer.Screen name="Letters" component={Letters} options={{headerShown:true, title: "Buchstaben", drawerIcon: ({focused, size}) => ( <IconMaterialCommunity name="alphabetical" size={size}/> ) }}/>
        <Drawer.Screen name="Play" component={Play} options={{headerShown:true, title: "Übungsmodus", drawerItemStyle: { display: 'none' }}} />
        <Drawer.Screen name="Camera" component={Camera} options={{headerShown:true, title: "Kameramodus", drawerItemStyle: { display: 'none' }, unmountOnBlur: true}}/>
        <Drawer.Screen name="Trainingsmodus" component={Trainingsselection} options={{headerShown:true, drawerIcon: ({focused, size}) => ( <FontAwesome5 name="book-reader" size={size}/> ) }}/>
        <Drawer.Screen name="Training" component={Training} options={{headerShown:true, title: "Trainingsmodus", drawerItemStyle: { display: 'none' }, headerRight: false}}/>
        <Drawer.Screen name="Trainingscamera" component={TrainingsCamera} options={{headerShown:true, title: "Trainingskameramodus", drawerItemStyle: { display: 'none' }, unmountOnBlur: true, headerRight: false}}/>
        <Drawer.Screen name="Impressum" component={Impressum} options={{headerShown:true, drawerIcon: ({focused, size}) => ( <Octicons name="law" size={size}/> ) }}/>
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
  },
  headerIcon: {
    color: "white",
    textAlign: "right",
    marginEnd: 20,
    fontSize: 20
}
});