diff --git a/src/components/dropdownMenu/DropdownMenu.tsx b/src/components/dropdownMenu/DropdownMenu.tsx
index 8f4ce435b..08f08f81d 100644
--- a/src/components/dropdownMenu/DropdownMenu.tsx
+++ b/src/components/dropdownMenu/DropdownMenu.tsx
@@ -13,6 +13,8 @@ import {
 
 import "./DropdownMenu.scss";
 
+import * as DropdownMenuRadix from "@radix-ui/react-dropdown-menu";
+
 const DropdownMenu = ({
   children,
   open,
@@ -23,10 +25,10 @@ const DropdownMenu = ({
   const MenuTriggerComp = getMenuTriggerComponent(children);
   const MenuContentComp = getMenuContentComponent(children);
   return (
-    <>
+    <DropdownMenuRadix.Root open={open}>
       {MenuTriggerComp}
       {open && MenuContentComp}
-    </>
+    </DropdownMenuRadix.Root>
   );
 };
 
diff --git a/src/components/main-menu/MainMenu.tsx b/src/components/main-menu/MainMenu.tsx
index ec4f4769e..636ffc6e5 100644
--- a/src/components/main-menu/MainMenu.tsx
+++ b/src/components/main-menu/MainMenu.tsx
@@ -15,8 +15,6 @@ import { withInternalFallback } from "../hoc/withInternalFallback";
 import { composeEventHandlers } from "../../utils";
 import { useTunnels } from "../context/tunnels";
 
-import * as DropdownMenuRadix from "@radix-ui/react-dropdown-menu";
-
 const MainMenu = Object.assign(
   withInternalFallback(
     "MainMenu",
@@ -40,7 +38,7 @@ const MainMenu = Object.assign(
 
       return (
         <mainMenuTunnel.In>
-          <DropdownMenuRadix.Root open={appState.openMenu === "canvas"}>
+          <DropdownMenu open={appState.openMenu === "canvas"}>
             <DropdownMenu.Trigger
               onToggle={() => {
                 setAppState({
@@ -67,7 +65,7 @@ const MainMenu = Object.assign(
                 </fieldset>
               )}
             </DropdownMenu.Content>
-          </DropdownMenuRadix.Root>
+          </DropdownMenu>
         </mainMenuTunnel.In>
       );
     },