Bug located to use react-native-material-menu?!

[John-CFO]

Hi guys,

I try to implement the react-native-material-menu library in my project. The problem is, that the menu open in the headerRight (as I expect) and also in the headerLeft. Any idea how to fix it?

https://github.com/mxck/react-native-material-menu/assets/122981014/bee39c74-0273-4460-a915-98ca56a9a942

My depedencies are the current as:

"dependencies": { "@react-navigation/drawer": "^6.6.6", "@react-navigation/native": "^6.1.9", "@react-navigation/stack": "^6.3.20", "expo": "^50.0.7", "expo-status-bar": "~1.11.1", "react": "18.2.0", "react-native": "^0.73.4", "react-native-gesture-handler": "^2.14.1", "react-native-material-menu": "^2.0.0", "react-native-reanimated": "^3.6.2", "react-native-safe-area-context": "^4.8.2", "react-native-screens": "^3.29.0" }

//MaterialMenu.tsx

interface`` HelpMenuProps { onClose: () => void; }

const HelpMenu: React.FC<HelpMenuProps> = ({ onClose }) => {
  const closeMenu = () => {
    onClose(); };

  return (
        <TouchableOpacity onPress={closeMenu}>
          <MaterialCommunityIcons name="close-circle" size={38} color="white" />
        </TouchableOpacity> );

//App.tsx

 import { Menu } from "react-native-material-menu";
 import MaterialMenu from "./components/MaterialMenu";

 const AppDrawerNavigator = () => {
  const [isMenuVisible, setMenuVisible] = useState(false);

  const showMenu = () => setMenuVisible(true);
  const hideMenu = () => setMenuVisible(false);

  const menuComponent = (
    <Menu
      visible={isMenuVisible}
      anchor={
        <TouchableOpacity onPress={showMenu} style={{ marginRight: 10 }}>
          <MaterialIcons name="live-help" size={36} color="black" />
        </TouchableOpacity>
      }
      onRequestClose={hideMenu} 
      >
      <MaterialMenu onClose={hideMenu} />
    </Menu>
  );

  return (
    <Drawer.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerTitleAlign: "center",
        drawerStyle: {
          width: 280, },
        /*--Help-Button--*/
        headerRight: () => (
          <React.Fragment key={"menu"}>{menuComponent}</React.Fragment>
        ),
      }}
    >
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Notification" component={NotificationScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
       );
};