diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index c43f6c08572..914c946bd3e 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -26,7 +26,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed support for rendering of negative floats. [#6895](https://github.com/scalableminds/webknossos/pull/6895)
 - Fixed caching issues with webworkers. [#6932](https://github.com/scalableminds/webknossos/pull/6932)
 - Fixed download button for annotations which was disabled in some cases. [#6931](https://github.com/scalableminds/webknossos/pull/6931)
-
+- Fixed antd deprecation warning for Dropdown menus. [#6898](https://github.com/scalableminds/webknossos/pull/6898)
 ### Removed
 
 ### Breaking Changes
diff --git a/frontend/javascripts/admin/task/task_annotation_view.tsx b/frontend/javascripts/admin/task/task_annotation_view.tsx
index d600640e562..2ff8b4ca534 100644
--- a/frontend/javascripts/admin/task/task_annotation_view.tsx
+++ b/frontend/javascripts/admin/task/task_annotation_view.tsx
@@ -1,4 +1,4 @@
-import { Dropdown, Menu, Modal } from "antd";
+import { Dropdown, MenuProps, Modal } from "antd";
 import {
   EyeOutlined,
   PlayCircleOutlined,
@@ -30,7 +30,6 @@ import Toast from "libs/toast";
 import TransferTaskModal from "dashboard/transfer_task_modal";
 import messages from "messages";
 import { getVolumeDescriptors } from "oxalis/model/accessors/volumetracing_accessor";
-const { Item } = Menu;
 const { confirm } = Modal;
 type OwnProps = {
   task: APITask;
@@ -101,7 +100,7 @@ class TaskAnnotationView extends React.PureComponent<Props, State> {
     }));
   };
 
-  getDropdownMenu(annotation: APIAnnotation) {
+  getDropdownMenu(annotation: APIAnnotation): MenuProps {
     let doesAnnotationNotBelongToActiveUser = true;
 
     if (annotation.owner && this.props.activeUser) {
@@ -120,57 +119,64 @@ class TaskAnnotationView extends React.PureComponent<Props, State> {
           Open
         </React.Fragment>
       );
-    return (
-      <Menu>
-        <Item key={`${annotation.id}-view`}>
-          <a href={`/annotations/Task/${annotation.id}`}>{label}</a>
-        </Item>
-
-        <Item
-          key={`${annotation.id}-transfer`}
-          onClick={() =>
+    return {
+      items: [
+        {
+          key: `${annotation.id}-view`,
+          label: <a href={`/annotations/Task/${annotation.id}`}>{label}</a>,
+        },
+        {
+          key: `${annotation.id}-transfer`,
+          onClick: () =>
             this.setState({
               currentAnnotation: annotation,
               isTransferModalOpen: true,
-            })
-          }
-        >
-          <TeamOutlined />
-          Transfer
-        </Item>
-        <Item key={`${annotation.id}-download`}>
-          <AsyncLink
-            href="#"
-            onClick={() => {
-              const isVolumeIncluded = getVolumeDescriptors(annotation).length > 0;
-              return downloadAnnotation(annotation.id, "Task", isVolumeIncluded);
-            }}
-            icon={<DownloadOutlined />}
-          >
-            Download
-          </AsyncLink>
-        </Item>
-        <Item key={`${annotation.id}-reset`} onClick={() => this.resetAnnotation(annotation)}>
-          <RollbackOutlined />
-          Reset
-        </Item>
-        <Item key={`${annotation.id}-delete`} onClick={() => this.deleteAnnotation(annotation)}>
-          <DeleteOutlined />
-          Reset and Cancel
-        </Item>
-        {annotation.state === "Finished" ? (
-          <Item key={`${annotation.id}-reopen`} onClick={() => this.reOpenAnnotation(annotation)}>
-            <FolderOpenOutlined />
-            Reopen
-          </Item>
-        ) : (
-          <Item key={`${annotation.id}-finish`} onClick={() => this.finishAnnotation(annotation)}>
-            <CheckCircleOutlined />
-            Finish
-          </Item>
-        )}
-      </Menu>
-    );
+            }),
+          icon: <TeamOutlined />,
+          label: "Transfer",
+        },
+        {
+          key: `${annotation.id}-download`,
+          label: (
+            <AsyncLink
+              href="#"
+              onClick={() => {
+                const isVolumeIncluded = getVolumeDescriptors(annotation).length > 0;
+                return downloadAnnotation(annotation.id, "Task", isVolumeIncluded);
+              }}
+              icon={<DownloadOutlined />}
+            >
+              Download
+            </AsyncLink>
+          ),
+        },
+        {
+          key: `${annotation.id}-reset`,
+          onClick: () => this.resetAnnotation(annotation),
+          icon: <RollbackOutlined />,
+          label: "Reset",
+        },
+        {
+          key: `${annotation.id}-delete`,
+          onClick: () => this.deleteAnnotation(annotation),
+          icon: <DeleteOutlined />,
+          label: "Reset and Cancel",
+        },
+        annotation.state === "Finished"
+          ? {
+              key: `${annotation.id}-reopen`,
+              onClick: () => this.reOpenAnnotation(annotation),
+              icon: <FolderOpenOutlined />,
+              label: "Reopen",
+            }
+          : {
+              key: `${annotation.id}-finish`,
+              onClick: () => this.finishAnnotation(annotation),
+              icon: <CheckCircleOutlined />,
+              label: "Finish",
+            },
+      ],
+    };
   }
 
   render() {
@@ -206,7 +212,7 @@ class TaskAnnotationView extends React.PureComponent<Props, State> {
                     </span>
                   </td>
                   <td className="nowrap">
-                    <Dropdown overlay={this.getDropdownMenu(annotation)} trigger={["click"]}>
+                    <Dropdown menu={this.getDropdownMenu(annotation)} trigger={["click"]}>
                       <a className="ant-dropdown-link" href="#">
                         Actions <DownOutlined />
                       </a>
diff --git a/frontend/javascripts/admin/task/task_search_form.tsx b/frontend/javascripts/admin/task/task_search_form.tsx
index 25d0a19201a..4a99977d5f4 100644
--- a/frontend/javascripts/admin/task/task_search_form.tsx
+++ b/frontend/javascripts/admin/task/task_search_form.tsx
@@ -1,4 +1,4 @@
-import { Form, Row, Dropdown, Menu, Col, Button, Input, Select } from "antd";
+import { Form, Row, Dropdown, Col, Button, Input, Select } from "antd";
 import { FormInstance } from "antd/lib/form";
 import { DownloadOutlined, DownOutlined, RetweetOutlined } from "@ant-design/icons";
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@sca... Remove this comment to see the full error message
@@ -276,14 +276,16 @@ class TaskSearchForm extends React.Component<Props, State> {
             }}
           >
             <Dropdown
-              overlay={
-                <Menu onClick={() => this.handleSearchFormFinish(true)}>
-                  <Menu.Item key="1">
-                    <RetweetOutlined />
-                    Show random subset
-                  </Menu.Item>
-                </Menu>
-              }
+              menu={{
+                onClick: () => this.handleSearchFormFinish(true),
+                items: [
+                  {
+                    key: "1",
+                    icon: <RetweetOutlined />,
+                    label: "Show random subset",
+                  },
+                ],
+              }}
             >
               <Button
                 type="primary"
diff --git a/frontend/javascripts/admin/voxelytics/task_list_view.tsx b/frontend/javascripts/admin/voxelytics/task_list_view.tsx
index 3d60698c6ac..7a0455b39b7 100644
--- a/frontend/javascripts/admin/voxelytics/task_list_view.tsx
+++ b/frontend/javascripts/admin/voxelytics/task_list_view.tsx
@@ -4,7 +4,6 @@ import {
   Input,
   Row,
   Col,
-  Menu,
   Button,
   Dropdown,
   notification,
@@ -12,6 +11,7 @@ import {
   Tag,
   Tooltip,
   Select,
+  MenuProps,
 } from "antd";
 import {
   ClockCircleOutlined,
@@ -406,28 +406,26 @@ export default function TaskListView({
 
   const colorHasher = new ColorHash({ lightness: [0.35, 0.5, 0.65] });
 
-  const overflowMenu = (
-    <Menu>
-      <Menu.Item key="1" onClick={copyAllArtifactPaths}>
-        Copy All Artifact Paths
-      </Menu.Item>
-      <Menu.Item key="2" onClick={downloadReportJSON}>
-        Download Report as JSON
-      </Menu.Item>
-      <Menu.Item key="3" onClick={downloadWorkflowYAML}>
-        Download Workflow YAML
-      </Menu.Item>
-      <Menu.Item key="4" onClick={downloadLog} disabled={singleRunId == null}>
-        {singleRunId == null ? (
-          <Tooltip title="Please select a specific run for log download.">
-            <div>Download Log</div>
-          </Tooltip>
-        ) : (
-          "Download Log"
-        )}
-      </Menu.Item>
-    </Menu>
-  );
+  const overflowMenu: MenuProps = {
+    items: [
+      { key: "1", onClick: copyAllArtifactPaths, label: "Copy All Artifact Paths" },
+      { key: "2", onClick: downloadReportJSON, label: "Download Report as JSON" },
+      { key: "3", onClick: downloadWorkflowYAML, label: "Download Workflow YAML" },
+      {
+        key: "4",
+        onClick: downloadLog,
+        disabled: singleRunId == null,
+        label:
+          singleRunId == null ? (
+            <Tooltip title="Please select a specific run for log download.">
+              <div>Download Log</div>
+            </Tooltip>
+          ) : (
+            "Download Log"
+          ),
+      },
+    ],
+  };
 
   const renderTaskGroupOrTask = (taskGroup: VoxelyticsTaskConfigWithHierarchy) => {
     const taskInfo = aggregateTaskInfos(taskGroup, report.tasks, runId);
@@ -631,7 +629,7 @@ export default function TaskListView({
               </Select.Option>
             ))}
           </Select>
-          <Dropdown.Button overlay={overflowMenu} onClick={() => setExpandedTasks([])}>
+          <Dropdown.Button menu={overflowMenu} onClick={() => setExpandedTasks([])}>
             Collapse All
           </Dropdown.Button>
         </div>
diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx b/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx
index 10dd7b2236e..781f42107d3 100644
--- a/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx
+++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx
@@ -16,7 +16,7 @@ import { clearCache, getDataset } from "admin/admin_rest_api";
 import Toast from "libs/toast";
 import messages from "messages";
 import CreateExplorativeModal from "dashboard/advanced_dataset/create_explorative_modal";
-import { Menu, Modal } from "antd";
+import { MenuProps, Modal } from "antd";
 const disabledStyle: React.CSSProperties = {
   pointerEvents: "none",
   color: "var(--ant-disabled)",
@@ -246,75 +246,70 @@ export function getDatasetActionContextMenu({
   reloadDataset: (arg0: APIDatasetId) => Promise<void>;
   datasets: APIDatasetCompact[];
   hideContextMenu: () => void;
-}) {
+}): MenuProps {
   if (datasets.length !== 1) {
-    return (
-      <Menu
-        onClick={hideContextMenu}
-        style={{
-          borderRadius: 6,
-        }}
-        mode="vertical"
-      >
-        <Menu.Item key="view" disabled>
-          No actions available.
-        </Menu.Item>
-      </Menu>
-    );
+    return {
+      onClick: hideContextMenu,
+      style: {
+        borderRadius: 6,
+      },
+      mode: "vertical",
+      items: [
+        {
+          key: "view",
+          disabled: true,
+          label: "No actions available.",
+        },
+      ],
+    };
   }
   const dataset = datasets[0];
 
-  return (
-    <Menu
-      onClick={hideContextMenu}
-      style={{
-        borderRadius: 6,
-      }}
-      mode="vertical"
-    >
-      {dataset.isActive && (
-        <Menu.Item
-          key="view"
-          onClick={() => {
-            window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/view`;
-          }}
-        >
-          View
-        </Menu.Item>
-      )}
-      {dataset.isEditable && dataset.isActive ? (
-        <Menu.Item
-          key="edit"
-          onClick={() => {
-            window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/edit`;
-          }}
-        >
-          Open Settings
-        </Menu.Item>
-      ) : null}
-
-      {dataset.isEditable && !dataset.isActive ? (
-        <Menu.Item
-          key="import"
-          onClick={() => {
-            window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/import`;
-          }}
-        >
-          Import
-        </Menu.Item>
-      ) : null}
+  return {
+    onClick: hideContextMenu,
+    style: {
+      borderRadius: 6,
+    },
+    mode: "vertical",
+    items: [
+      dataset.isActive
+        ? {
+            key: "view",
+            label: "View",
+            onClick: () => {
+              window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/view`;
+            },
+          }
+        : null,
+      dataset.isEditable && dataset.isActive
+        ? {
+            key: "edit",
+            label: "Open Settings",
+            onClick: () => {
+              window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/edit`;
+            },
+          }
+        : null,
 
-      <Menu.Item
-        key="reload"
-        onClick={async () => {
+      dataset.isEditable && !dataset.isActive
+        ? {
+            key: "import",
+            label: "Import",
+            onClick: () => {
+              window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/import`;
+            },
+          }
+        : null,
+      {
+        key: "reload",
+        label: "Reload",
+        onClick: async () => {
           const fullDataset = await getDataset(dataset);
           return dataset.isActive ? onClearCache(fullDataset, reloadDataset) : null;
-        }}
-      >
-        Reload
-      </Menu.Item>
-    </Menu>
-  );
+        },
+      },
+    ],
+  };
 }
 
 export default withRouter<RouteComponentProps & Props, any>(DatasetActionView);
diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx
index 700c1f6968c..dc351f50e41 100644
--- a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx
+++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx
@@ -1,6 +1,6 @@
 import { FolderOpenOutlined, PlusOutlined, WarningOutlined } from "@ant-design/icons";
 import { Link } from "react-router-dom";
-import { Dropdown, Table, Tag, Tooltip } from "antd";
+import { Dropdown, MenuProps, Table, Tag, Tooltip } from "antd";
 import type { FilterValue, SorterResult, TablePaginationConfig } from "antd/lib/table/interface";
 import * as React from "react";
 import _ from "lodash";
@@ -68,12 +68,12 @@ type ContextMenuProps = {
 function ContextMenuInner(propsWithInputRef: ContextMenuProps) {
   const inputRef = React.useContext(ContextMenuContext);
   const { datasets, reloadDataset, contextMenuPosition, hideContextMenu } = propsWithInputRef;
-  let overlay = <div />;
+  let menu: MenuProps = { items: [] };
 
   if (contextMenuPosition != null) {
     // getDatasetActionContextMenu should not be turned into <DatasetActionMenu />
     // as this breaks antd's styling of the menu within the dropdown.
-    overlay = getDatasetActionContextMenu({
+    menu = getDatasetActionContextMenu({
       hideContextMenu,
       datasets,
       reloadDataset,
@@ -87,11 +87,10 @@ function ContextMenuInner(propsWithInputRef: ContextMenuProps) {
     <React.Fragment>
       <Shortcut supportInputElements keys="escape" onTrigger={hideContextMenu} />
       <Dropdown
-        overlay={overlay}
+        menu={menu}
         overlayClassName="dropdown-overlay-container-for-context-menu"
         open={contextMenuPosition != null}
         getPopupContainer={() => refContent}
-        // @ts-ignore
         destroyPopupOnHide
       >
         <div />
diff --git a/frontend/javascripts/dashboard/dataset_view.tsx b/frontend/javascripts/dashboard/dataset_view.tsx
index 7f53352b62e..eb01c733142 100644
--- a/frontend/javascripts/dashboard/dataset_view.tsx
+++ b/frontend/javascripts/dashboard/dataset_view.tsx
@@ -7,7 +7,6 @@ import {
   Col,
   Dropdown,
   Input,
-  Menu,
   Row,
   Spin,
   Tooltip,
@@ -48,6 +47,8 @@ import {
 } from "./dataset/queries";
 import { PricingEnforcedButton } from "components/pricing_enforcers";
 import { PricingPlanEnum } from "admin/organization/pricing_plan_utils";
+import { MenuProps } from "rc-menu";
+import { ItemType } from "antd/lib/menu/hooks/useItems";
 
 type Props = {
   user: APIUser;
@@ -82,7 +83,7 @@ function filterDatasetsForUsersOrganization(datasets: APIDatasetCompact[], user:
     : datasets;
 }
 
-const refreshMenuItems = [
+const refreshMenuItems: ItemType[] = [
   {
     key: "1",
     label: "Scan disk for new datasets",
@@ -179,7 +180,7 @@ function DatasetView(props: Props) {
     </Radio>
   );
 
-  const filterMenu = {
+  const filterMenu: MenuProps = {
     items: [
       { label: createFilteringModeRadio("showAllDatasets", "Show all datasets"), key: "all" },
       {
@@ -212,7 +213,6 @@ function DatasetView(props: Props) {
   const search = isUserAdminOrDatasetManager ? (
     <Input.Group compact style={{ display: "flex" }}>
       {searchBox}
-
       <Dropdown menu={filterMenu} trigger={["click"]}>
         <Button>
           <Badge dot={datasetFilteringMode !== "showAllDatasets"}>
@@ -241,7 +241,7 @@ function DatasetView(props: Props) {
             }
           >
             <Dropdown.Button
-              overlay={<Menu onClick={context.checkDatasets} items={refreshMenuItems} />}
+              menu={{ onClick: context.checkDatasets, items: refreshMenuItems }}
               style={margin}
               onClick={() => context.fetchDatasets()}
               disabled={context.isChecking}
diff --git a/frontend/javascripts/dashboard/folders/folder_tree.tsx b/frontend/javascripts/dashboard/folders/folder_tree.tsx
index d55bd2b9562..f1b1ad7f7cd 100644
--- a/frontend/javascripts/dashboard/folders/folder_tree.tsx
+++ b/frontend/javascripts/dashboard/folders/folder_tree.tsx
@@ -7,7 +7,7 @@ import {
 } from "../dataset/dataset_collection_context";
 
 import { DeleteOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons";
-import { Dropdown, Menu, Modal } from "antd";
+import { Dropdown, Modal, MenuProps } from "antd";
 import Toast from "libs/toast";
 import { DragObjectWithType } from "react-dnd";
 import Tree, { DataNode, DirectoryTreeProps } from "antd/lib/tree";
@@ -143,11 +143,11 @@ export function FolderTreeSidebar({
     [context],
   );
 
-  const createMenu = () => (
-    <Menu
-      items={[{ key: "disabled", disabled: true, label: "Please right-click an existing folder." }]}
-    />
-  );
+  const createMenu = (): MenuProps => {
+    return {
+      items: [{ key: "disabled", disabled: true, label: "Please right-click an existing folder." }],
+    };
+  };
 
   return (
     <div
@@ -186,12 +186,9 @@ export function FolderTreeSidebar({
         />
       </div>
       <Dropdown
-        overlay={createMenu}
+        menu={createMenu()}
         placement="bottom"
-        // The overlay is generated lazily. By default, this would make the overlay
-        // re-render on each parent's render() after it was shown for the first time.
-        // The reason for this is that it's not destroyed after closing.
-        // Therefore, autoDestroy is passed.
+        // AutoDestroy is used to remove the menu from DOM and keep up the performance.
         // destroyPopupOnHide should also be an option according to the docs, but
         // does not work properly. See https://github.com/react-component/trigger/issues/106#issuecomment-948532990
         // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; overlay: () => Element;... Remove this comment to see the full error message
@@ -220,49 +217,46 @@ function generateTitle(
   }
 
   const createMenu = () => {
-    const menuItems = [
-      {
-        key: "create",
-        disabled: !folder.isEditable,
-        onClick: () => context.showCreateFolderPrompt(id),
-        label: (
-          <PricingEnforcedSpan requiredPricingPlan={PricingPlanEnum.Team}>
-            <PlusOutlined />
-            New Folder
-          </PricingEnforcedSpan>
-        ),
-      },
-      {
-        key: "edit",
-        disabled: !folder.isEditable,
-        onClick: editFolder,
-        label: (
-          <PricingEnforcedSpan requiredPricingPlan={PricingPlanEnum.Team}>
-            <EditOutlined />
-            Edit Folder
-          </PricingEnforcedSpan>
-        ),
-      },
-      {
-        key: "delete",
-        onClick: deleteFolder,
-        disabled: !folder.isEditable,
-        icon: <DeleteOutlined />,
-        label: <span>Delete Folder</span>,
-      },
-    ];
-
-    return <Menu items={menuItems} />;
+    return {
+      items: [
+        {
+          key: "create",
+          disabled: !folder.isEditable,
+          onClick: () => context.showCreateFolderPrompt(id),
+          label: (
+            <PricingEnforcedSpan requiredPricingPlan={PricingPlanEnum.Team}>
+              <PlusOutlined />
+              New Folder
+            </PricingEnforcedSpan>
+          ),
+        },
+        {
+          key: "edit",
+          disabled: !folder.isEditable,
+          onClick: editFolder,
+          label: (
+            <PricingEnforcedSpan requiredPricingPlan={PricingPlanEnum.Team}>
+              <EditOutlined />
+              Edit Folder
+            </PricingEnforcedSpan>
+          ),
+        },
+        {
+          key: "delete",
+          onClick: deleteFolder,
+          disabled: !folder.isEditable,
+          icon: <DeleteOutlined />,
+          label: <span>Delete Folder</span>,
+        },
+      ],
+    };
   };
 
   return (
     <Dropdown
-      overlay={createMenu}
+      menu={createMenu()}
       placement="bottom"
-      // The overlay is generated lazily. By default, this would make the overlay
-      // re-render on each parent's render() after it was shown for the first time.
-      // The reason for this is that it's not destroyed after closing.
-      // Therefore, autoDestroy is passed.
+      // AutoDestroy is used to remove the menu from DOM and keep up the performance.
       // destroyPopupOnHide should also be an option according to the docs, but
       // does not work properly. See https://github.com/react-component/trigger/issues/106#issuecomment-948532990
       // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; overlay: () => Element;... Remove this comment to see the full error message
diff --git a/frontend/javascripts/oxalis/view/action-bar/private_links_view.tsx b/frontend/javascripts/oxalis/view/action-bar/private_links_view.tsx
index 1a55da88bfb..928ce168f59 100644
--- a/frontend/javascripts/oxalis/view/action-bar/private_links_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/private_links_view.tsx
@@ -19,7 +19,7 @@ import {
   DatePickerProps,
   Dropdown,
   Input,
-  Menu,
+  MenuProps,
   Modal,
   Popover,
   Space,
@@ -147,28 +147,26 @@ export function useZarrLinkMenu(maybeAccessToken: string | null) {
     Toast.success("URL copied to clipboard");
   };
 
-  const copyLayerUrlMenu = (
-    <Menu
-      // @ts-ignore
-      onClick={copyTokenToClipboard}
-      items={[
-        {
-          type: "group",
-          label: "Select layer to copy URL",
-          children: dataLayers.map((layer) => {
-            const readableLayerName =
-              "tracingId" in layer && layer.tracingId != null
-                ? getReadableNameByVolumeTracingId(tracing, layer.tracingId)
-                : layer.name;
-            return {
-              label: readableLayerName,
-              key: readableLayerName,
-            };
-          }),
-        },
-      ]}
-    />
-  );
+  const copyLayerUrlMenu: MenuProps = {
+    // @ts-ignore
+    onClick: copyTokenToClipboard,
+    items: [
+      {
+        type: "group",
+        label: "Select layer to copy URL",
+        children: dataLayers.map((layer) => {
+          const readableLayerName =
+            "tracingId" in layer && layer.tracingId != null
+              ? getReadableNameByVolumeTracingId(tracing, layer.tracingId)
+              : layer.name;
+          return {
+            label: readableLayerName,
+            key: readableLayerName,
+          };
+        }),
+      },
+    ],
+  };
 
   return { baseUrl, copyLayerUrlMenu };
 }
@@ -190,7 +188,7 @@ function UrlInput({ linkItem }: { linkItem: ZarrPrivateLink }) {
         disabled
       />
 
-      <Dropdown overlay={copyLayerUrlMenu}>
+      <Dropdown menu={copyLayerUrlMenu}>
         <Button size="small" icon={<CopyOutlined />} style={{ background: "transparent" }} />
       </Dropdown>
     </Input.Group>
@@ -227,34 +225,32 @@ function ExpirationDate({ linkItem }: { linkItem: ZarrPrivateLink }) {
 
     updateMutation.mutate({ ...linkItem, expirationDateTime: Number(expirationDateTime) });
   };
-  const expirationMenu = (
-    <Menu
-      // @ts-ignore
-      onClick={handleExpirationMenuClick}
-      items={[
-        {
-          label: "1 day",
-          key: "1 day",
-        },
-        {
-          label: "1 week",
-          key: "1 week",
-        },
-        {
-          label: "6 months",
-          key: "6 months",
-        },
-        {
-          label: "1 year",
-          key: "1 year",
-        },
-      ]}
-    />
-  );
+  const expirationMenu: MenuProps = {
+    // @ts-ignore
+    onClick: handleExpirationMenuClick,
+    items: [
+      {
+        label: "1 day",
+        key: "1 day",
+      },
+      {
+        label: "1 week",
+        key: "1 week",
+      },
+      {
+        label: "6 months",
+        key: "6 months",
+      },
+      {
+        label: "1 year",
+        key: "1 year",
+      },
+    ],
+  };
 
   if (linkItem.expirationDateTime == null) {
     return (
-      <Dropdown overlay={expirationMenu}>
+      <Dropdown menu={expirationMenu}>
         <Space style={{ color: "var(--ant-text-secondary)" }}>
           Add Expiration Date
           <DownOutlined />
diff --git a/frontend/javascripts/oxalis/view/action-bar/share_view_dataset_modal_view.tsx b/frontend/javascripts/oxalis/view/action-bar/share_view_dataset_modal_view.tsx
index 9833032af14..03f1708e472 100644
--- a/frontend/javascripts/oxalis/view/action-bar/share_view_dataset_modal_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/share_view_dataset_modal_view.tsx
@@ -76,7 +76,7 @@ function _ShareViewDatasetModalView(props: Props) {
                 value={zarrBaseUrl}
                 readOnly
               />
-              <Dropdown overlay={copyLayerUrlMenu}>
+              <Dropdown menu={copyLayerUrlMenu}>
                 <Button
                   style={{
                     width: "15%",
diff --git a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
index d3f9b2235af..6fbba43086f 100644
--- a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx
@@ -1,4 +1,4 @@
-import { Radio, Tooltip, Badge, Space, Popover, RadioChangeEvent, Dropdown, Menu } from "antd";
+import { Radio, Tooltip, Badge, Space, Popover, RadioChangeEvent, Dropdown, MenuProps } from "antd";
 import { ClearOutlined, DownOutlined, ExportOutlined, SettingOutlined } from "@ant-design/icons";
 import { useSelector, useDispatch } from "react-redux";
 import React, { useEffect, useCallback, useState } from "react";
@@ -57,6 +57,7 @@ import { hslaToCSS } from "oxalis/shaders/utils.glsl";
 import { clearProofreadingByProducts } from "oxalis/model/actions/proofread_actions";
 import { hasAgglomerateMapping } from "oxalis/controller/combinations/segmentation_handlers";
 import { QuickSelectControls } from "./quick_select_settings";
+import { MenuInfo } from "rc-menu/lib/interface";
 
 const narrowButtonStyle = {
   paddingLeft: 10,
@@ -268,26 +269,24 @@ function VolumeInterpolationButton() {
     getInterpolationInfo(state, "Not available since"),
   );
 
-  const menu = (
-    <Menu
-      onClick={(e) => {
-        dispatch(updateUserSettingAction("interpolationMode", e.key as InterpolationMode));
-        onInterpolateClick(null);
-      }}
-      items={[
-        {
-          label: "Interpolate current segment",
-          key: InterpolationModeEnum.INTERPOLATE,
-          icon: INTERPOLATION_ICON[InterpolationModeEnum.INTERPOLATE],
-        },
-        {
-          label: "Extrude (copy) current segment",
-          key: InterpolationModeEnum.EXTRUDE,
-          icon: INTERPOLATION_ICON[InterpolationModeEnum.EXTRUDE],
-        },
-      ]}
-    />
-  );
+  const menu: MenuProps = {
+    onClick: (e: MenuInfo) => {
+      dispatch(updateUserSettingAction("interpolationMode", e.key as InterpolationMode));
+      onInterpolateClick(null);
+    },
+    items: [
+      {
+        label: "Interpolate current segment",
+        key: InterpolationModeEnum.INTERPOLATE,
+        icon: INTERPOLATION_ICON[InterpolationModeEnum.INTERPOLATE],
+      },
+      {
+        label: "Extrude (copy) current segment",
+        key: InterpolationModeEnum.EXTRUDE,
+        icon: INTERPOLATION_ICON[InterpolationModeEnum.EXTRUDE],
+      },
+    ],
+  };
 
   const buttonsRender = useCallback(
     ([leftButton, rightButton]) => [
@@ -304,7 +303,7 @@ function VolumeInterpolationButton() {
   return (
     <Dropdown.Button
       icon={<DownOutlined />}
-      overlay={menu}
+      menu={menu}
       onClick={onInterpolateClick}
       style={{ padding: "0 5px 0 6px" }}
       buttonsRender={buttonsRender}
diff --git a/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx b/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx
index 4f6957bd5cc..1d0b0a52b80 100644
--- a/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx
@@ -1,4 +1,4 @@
-import { Button, Dropdown, Menu, Modal, Tooltip } from "antd";
+import { Button, Dropdown, Modal, Tooltip } from "antd";
 import {
   HistoryOutlined,
   CheckCircleOutlined,
@@ -69,13 +69,14 @@ import Toast from "libs/toast";
 import UrlManager from "oxalis/controller/url_manager";
 import { withAuthentication } from "admin/auth/authentication_modal";
 import { PrivateLinksModal } from "./private_links_view";
+import { ItemType, SubMenuType } from "antd/lib/menu/hooks/useItems";
 
 const AsyncButtonWithAuthentication = withAuthentication<AsyncButtonProps, typeof AsyncButton>(
   AsyncButton,
 );
 
 type OwnProps = {
-  layoutMenu: React.ReactNode;
+  layoutMenu: SubMenuType;
 };
 type StateProps = {
   annotationType: APIAnnotationType;
@@ -97,8 +98,9 @@ type State = {
   isZarrPrivateLinksModalOpen: boolean;
   isReopenAllowed: boolean;
 };
+
 export type LayoutProps = {
-  storedLayoutNamesForView: Array<string>;
+  storedLayoutNamesForView: string[];
   activeLayout: string;
   layoutKey: LayoutKeys;
   autoSaveLayouts: boolean;
@@ -112,7 +114,8 @@ type LayoutMenuProps = LayoutProps & {
   onDeleteLayout: (arg0: string) => void;
   addNewLayout: () => void;
 };
-export function LayoutMenu(props: LayoutMenuProps) {
+
+export function getLayoutMenu(props: LayoutMenuProps): SubMenuType {
   const {
     storedLayoutNamesForView,
     layoutKey,
@@ -126,8 +129,8 @@ export function LayoutMenu(props: LayoutMenuProps) {
     saveCurrentLayout,
     // rome-ignore lint/correctness/noUnusedVariables: underscore prefix does not work with object destructuring
     setCurrentLayout,
-    ...others
   } = props;
+
   const layoutMissingHelpTitle = (
     <React.Fragment>
       <h5
@@ -140,15 +143,15 @@ export function LayoutMenu(props: LayoutMenuProps) {
       <p>{messages["layouting.missing_custom_layout_info"]}</p>
     </React.Fragment>
   );
+
   const customLayoutsItems = storedLayoutNamesForView.map((layout) => {
     const isSelectedLayout = layout === activeLayout;
-    return (
-      <Menu.Item
-        key={layout}
-        className={
-          isSelectedLayout ? "selected-layout-item bullet-point-less-li" : "bullet-point-less-li"
-        }
-      >
+    return {
+      key: layout,
+      className: isSelectedLayout
+        ? "selected-layout-item bullet-point-less-li"
+        : "bullet-point-less-li",
+      label: (
         <div className="layout-dropdown-list-item-container">
           <div className="layout-dropdown-selection-area" onClick={() => onSelectLayout(layout)}>
             {layout}
@@ -164,86 +167,87 @@ export function LayoutMenu(props: LayoutMenuProps) {
             </Tooltip>
           )}
         </div>
-      </Menu.Item>
-    );
+      ),
+    };
   });
-  return (
-    <Menu.SubMenu
-      {...others}
-      title={
-        <span
-          style={{
-            display: "inline-block",
-            minWidth: 120,
-          }}
-        >
-          <LayoutOutlined />
-          Layout
-          <Tooltip placement="top" title={layoutMissingHelpTitle}>
-            <InfoCircleOutlined
-              style={{
-                color: "gray",
-                marginRight: 36,
-              }}
-              className="right-floating-icon"
-            />
-          </Tooltip>
-        </span>
-      }
-    >
-      <Menu.Item
+
+  return {
+    key: "layout-menu",
+    label: (
+      <span
         style={{
           display: "inline-block",
+          minWidth: 120,
         }}
-        onClick={addNewLayout}
-        title="Add a new Layout"
       >
-        <PlusOutlined />
-      </Menu.Item>
-      <Menu.Item
-        style={{
+        <LayoutOutlined />
+        Layout
+        <Tooltip placement="top" title={layoutMissingHelpTitle}>
+          <InfoCircleOutlined
+            style={{
+              color: "gray",
+              marginRight: 36,
+            }}
+            className="right-floating-icon"
+          />
+        </Tooltip>
+      </span>
+    ),
+    children: [
+      {
+        key: "new-layout",
+        style: {
           display: "inline-block",
-        }}
-        onClick={onResetLayout}
-        title="Reset Layout"
-      >
-        <RollbackOutlined />
-      </Menu.Item>
-      <Menu.Item
-        style={{
+        },
+        onClick: addNewLayout,
+        title: "Add a new Layout",
+        icon: <PlusOutlined />,
+      },
+      {
+        key: "reset-layout",
+        style: {
           display: "inline-block",
-        }}
-        onClick={() => setAutoSaveLayouts(!autoSaveLayouts)}
-        title={`${autoSaveLayouts ? "Disable" : "Enable"} auto-saving of current layout`}
-      >
-        {autoSaveLayouts ? <DisconnectOutlined /> : <LinkOutlined />}
-      </Menu.Item>
-      {autoSaveLayouts ? null : (
-        <Menu.Item
-          style={{
-            display: "inline-block",
-          }}
-          onClick={saveCurrentLayout}
-          title="Save current layout"
-        >
-          <SaveOutlined />
-        </Menu.Item>
-      )}
-      <Menu.Divider />
-      <Menu.ItemGroup
-        className="available-layout-list"
-        title={
+        },
+        onClick: onResetLayout,
+        title: "Reset Layout",
+        icon: <RollbackOutlined />,
+      },
+      {
+        key: "autosave-layout",
+        style: {
+          display: "inline-block",
+        },
+        onClick: () => setAutoSaveLayouts(!autoSaveLayouts),
+        title: `${autoSaveLayouts ? "Disable" : "Enable"} auto-saving of current layout`,
+        icon: autoSaveLayouts ? <DisconnectOutlined /> : <LinkOutlined />,
+      },
+      autoSaveLayouts
+        ? null
+        : {
+            key: "save-layout",
+            style: {
+              display: "inline-block",
+            },
+            onClick: saveCurrentLayout,
+            title: "Save current layout",
+            icon: <SaveOutlined />,
+          },
+      { key: "divider", type: "divider" },
+      {
+        key: "available-layouts",
+        type: "group",
+        className: "available-layout-list",
+        label: (
           <span
             style={{
               fontSize: 14,
             }}
           >{`Layouts for ${mapLayoutKeysToLanguage[layoutKey]}`}</span>
-        }
-      >
-        {customLayoutsItems}
-      </Menu.ItemGroup>
-    </Menu.SubMenu>
-  );
+        ),
+        children: customLayoutsItems,
+      },
+    ],
+  };
 }
 
 class TracingActionsView extends React.PureComponent<Props, State> {
@@ -561,25 +565,25 @@ class TracingActionsView extends React.PureComponent<Props, State> {
         Undo Finish
       </ButtonComponent>
     ) : null;
-    const elements = [];
+    const menuItems: ItemType[] = [];
     const modals = [];
 
     if (restrictions.allowFinish) {
-      elements.push(
-        <Menu.Item key="finish-button" onClick={this.handleFinish}>
-          <CheckCircleOutlined />
-          {archiveButtonText}
-        </Menu.Item>,
-      );
+      menuItems.push({
+        key: "finish-button",
+        onClick: this.handleFinish,
+        icon: <CheckCircleOutlined />,
+        label: archiveButtonText,
+      });
     }
 
     if (restrictions.allowDownload) {
-      elements.push(
-        <Menu.Item key="download-button" onClick={this.handleDownloadOpen}>
-          <DownloadOutlined />
-          Download
-        </Menu.Item>,
-      );
+      menuItems.push({
+        key: "download-button",
+        onClick: this.handleDownloadOpen,
+        icon: <DownloadOutlined />,
+        label: "Download",
+      });
       modals.push(
         <DownloadModalView
           key="download-modal"
@@ -589,21 +593,19 @@ class TracingActionsView extends React.PureComponent<Props, State> {
       );
     }
 
-    elements.push(
-      <Menu.Item key="share-button" onClick={this.handleShareOpen}>
-        <ShareAltOutlined />
-        Share
-      </Menu.Item>,
-    );
-    elements.push(
-      <Menu.Item
-        key="zarr-links-button"
-        onClick={() => this.setState({ isZarrPrivateLinksModalOpen: true })}
-      >
-        <LinkOutlined />
-        Zarr Links
-      </Menu.Item>,
-    );
+    menuItems.push({
+      key: "share-button",
+      onClick: this.handleShareOpen,
+      icon: <ShareAltOutlined />,
+      label: "Share",
+    });
+    menuItems.push({
+      key: "zarr-links-button",
+      onClick: () => this.setState({ isZarrPrivateLinksModalOpen: true }),
+
+      icon: <LinkOutlined />,
+      label: "Zarr Links",
+    });
 
     modals.push(
       <ShareModalView
@@ -623,20 +625,20 @@ class TracingActionsView extends React.PureComponent<Props, State> {
       />,
     );
     if (activeUser != null) {
-      elements.push(
-        <Menu.Item key="duplicate-button" onClick={this.handleDuplicate}>
-          <CopyOutlined />
-          Duplicate
-        </Menu.Item>,
-      );
+      menuItems.push({
+        key: "duplicate-button",
+        onClick: this.handleDuplicate,
+        icon: <CopyOutlined />,
+        label: "Duplicate",
+      });
     }
-    elements.push(screenshotMenuItem);
-    elements.push(
-      <Menu.Item key="user-scripts-button" onClick={this.handleUserScriptsOpen}>
-        <SettingOutlined />
-        Add Script
-      </Menu.Item>,
-    );
+    menuItems.push(screenshotMenuItem);
+    menuItems.push({
+      key: "user-scripts-button",
+      onClick: this.handleUserScriptsOpen,
+      icon: <SettingOutlined />,
+      label: "Add Script",
+    });
     modals.push(
       <UserScriptsModalView
         key="user-scripts-modal"
@@ -646,12 +648,12 @@ class TracingActionsView extends React.PureComponent<Props, State> {
     );
 
     if (restrictions.allowSave && isSkeletonMode && activeUser != null) {
-      elements.push(
-        <Menu.Item key="merge-button" onClick={this.handleMergeOpen}>
-          <FolderOpenOutlined />
-          Merge Annotation
-        </Menu.Item>,
-      );
+      menuItems.push({
+        key: "merge-button",
+        onClick: this.handleMergeOpen,
+        icon: <FolderOpenOutlined />,
+        label: "Merge Annotation",
+      });
       modals.push(
         <MergeModalView
           key="merge-modal"
@@ -661,26 +663,25 @@ class TracingActionsView extends React.PureComponent<Props, State> {
       );
     }
     if (controlMode !== ControlModeEnum.SANDBOX) {
-      elements.push(
-        <Menu.Item key="restore-button" onClick={this.handleRestore}>
-          <HistoryOutlined />
-          Restore Older Version
-        </Menu.Item>,
-      );
+      menuItems.push({
+        key: "restore-button",
+        onClick: this.handleRestore,
+        icon: <HistoryOutlined />,
+        label: "Restore Older Version",
+      });
     }
 
-    elements.push(layoutMenu);
+    menuItems.push(layoutMenu);
 
     if (restrictions.allowSave && !task) {
-      elements.push(
-        <Menu.Item key="disable-saving" onClick={this.handleDisableSaving}>
-          <StopOutlined />
-          Disable saving
-        </Menu.Item>,
-      );
+      menuItems.push({
+        key: "disable-saving",
+        onClick: this.handleDisableSaving,
+        icon: <StopOutlined />,
+        label: "Disable saving",
+      });
     }
 
-    const menu = <Menu>{elements}</Menu>;
     return (
       <>
         <div className="antd-legacy-group">
@@ -690,7 +691,7 @@ class TracingActionsView extends React.PureComponent<Props, State> {
           {modals}
         </div>
         <div>
-          <Dropdown overlay={menu} trigger={["click"]}>
+          <Dropdown menu={{ items: menuItems }} trigger={["click"]}>
             <ButtonComponent className="narrow">
               Menu
               <DownOutlined />
diff --git a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
index 99985a0903f..1777d39dcb6 100644
--- a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useSelector } from "react-redux";
-import { Dropdown, Menu } from "antd";
+import { Dropdown, MenuProps } from "antd";
 import {
   ShareAltOutlined,
   DownOutlined,
@@ -16,16 +16,18 @@ import {
 } from "oxalis/model/actions/ui_actions";
 import Store, { OxalisState } from "oxalis/store";
 import PythonClientModalView from "./python_client_modal_view";
+import { MenuItemType, SubMenuType } from "antd/lib/menu/hooks/useItems";
 
 type Props = {
-  layoutMenu: React.ReactNode;
+  layoutMenu: SubMenuType;
 };
-export const screenshotMenuItem = (
-  <Menu.Item key="screenshot-button" onClick={downloadScreenshot}>
-    <CameraOutlined />
-    Screenshot (Q)
-  </Menu.Item>
-);
+export const screenshotMenuItem: MenuItemType = {
+  key: "screenshot-button",
+  onClick: downloadScreenshot,
+  icon: <CameraOutlined />,
+  label: "Screenshot (Q)",
+};
+
 export default function ViewDatasetActionsView(props: Props) {
   const isShareModalOpen = useSelector((state: OxalisState) => state.uiInformation.showShareModal);
   const isPythonClientModalOpen = useSelector(
@@ -43,26 +45,25 @@ export default function ViewDatasetActionsView(props: Props) {
       onClose={() => Store.dispatch(setPythonClientModalVisibilityAction(false))}
     />
   );
-  const overlayMenu = (
-    <Menu>
-      <Menu.Item
-        key="share-button"
-        onClick={() => Store.dispatch(setShareModalVisibilityAction(true))}
-      >
-        <ShareAltOutlined />
-        Share
-      </Menu.Item>
-      {screenshotMenuItem}
-      <Menu.Item
-        key="python-client-button"
-        onClick={() => Store.dispatch(setPythonClientModalVisibilityAction(true))}
-      >
-        <DownloadOutlined />
-        Download
-      </Menu.Item>
-      {props.layoutMenu}
-    </Menu>
-  );
+  const overlayMenu: MenuProps = {
+    items: [
+      {
+        key: "share-button",
+        onClick: () => Store.dispatch(setShareModalVisibilityAction(true)),
+        icon: <ShareAltOutlined />,
+        label: "Share",
+      },
+      screenshotMenuItem,
+      {
+        key: "python-client-button",
+        onClick: () => Store.dispatch(setPythonClientModalVisibilityAction(true)),
+        icon: <DownloadOutlined />,
+        label: "Download",
+      },
+      props.layoutMenu,
+    ],
+  };
+
   return (
     <div
       style={{
@@ -71,7 +72,7 @@ export default function ViewDatasetActionsView(props: Props) {
     >
       {shareDatasetModal}
       {pythonClientModal}
-      <Dropdown overlay={overlayMenu} trigger={["click"]}>
+      <Dropdown menu={overlayMenu} trigger={["click"]}>
         <ButtonComponent
           style={{
             padding: "0 10px",
diff --git a/frontend/javascripts/oxalis/view/action_bar_view.tsx b/frontend/javascripts/oxalis/view/action_bar_view.tsx
index cb508076de6..4545825b88c 100644
--- a/frontend/javascripts/oxalis/view/action_bar_view.tsx
+++ b/frontend/javascripts/oxalis/view/action_bar_view.tsx
@@ -17,8 +17,10 @@ import constants, { ControlModeEnum } from "oxalis/constants";
 import DatasetPositionView from "oxalis/view/action-bar/dataset_position_view";
 import type { OxalisState } from "oxalis/store";
 import Store from "oxalis/store";
-import type { LayoutProps } from "oxalis/view/action-bar/tracing_actions_view";
-import TracingActionsView, { LayoutMenu } from "oxalis/view/action-bar/tracing_actions_view";
+import TracingActionsView, {
+  getLayoutMenu,
+  LayoutProps,
+} from "oxalis/view/action-bar/tracing_actions_view";
 import ViewDatasetActionsView from "oxalis/view/action-bar/view_dataset_actions_view";
 import ViewModesView from "oxalis/view/action-bar/view_modes_view";
 import ToolbarView from "oxalis/view/action-bar/toolbar_view";
@@ -148,20 +150,19 @@ class ActionBarView extends React.PureComponent<Props, State> {
     } = this.props;
     const isViewMode = controlMode === ControlModeEnum.VIEW;
     const isArbitrarySupported = hasSkeleton || isViewMode;
-    const layoutMenu = (
-      <LayoutMenu
-        {...layoutProps}
-        key="layout-menu"
-        addNewLayout={() => {
-          this.setState({
-            isNewLayoutModalOpen: true,
-          });
-        }}
-        onResetLayout={this.handleResetLayout}
-        onSelectLayout={layoutProps.setCurrentLayout}
-        onDeleteLayout={this.handleLayoutDeleted}
-      />
-    );
+
+    const layoutMenu = getLayoutMenu({
+      ...layoutProps,
+      addNewLayout: () => {
+        this.setState({
+          isNewLayoutModalOpen: true,
+        });
+      },
+      onResetLayout: this.handleResetLayout,
+      onSelectLayout: layoutProps.setCurrentLayout,
+      onDeleteLayout: this.handleLayoutDeleted,
+    });
+
     return (
       <React.Fragment>
         <div className="action-bar">
diff --git a/frontend/javascripts/oxalis/view/context_menu.tsx b/frontend/javascripts/oxalis/view/context_menu.tsx
index f2b31755c43..515e739b7ae 100644
--- a/frontend/javascripts/oxalis/view/context_menu.tsx
+++ b/frontend/javascripts/oxalis/view/context_menu.tsx
@@ -1,8 +1,8 @@
-import { CopyOutlined } from "@ant-design/icons";
+import { CopyOutlined, PushpinOutlined } from "@ant-design/icons";
 import type { Dispatch } from "redux";
-import { Dropdown, Empty, Menu, notification, Tooltip, Popover, Input, MenuItemProps } from "antd";
-import { connect, useDispatch, useSelector } from "react-redux";
-import React, { createContext, MouseEvent, useContext, useEffect } from "react";
+import { Dropdown, Empty, notification, Tooltip, Popover, Input, MenuProps } from "antd";
+import { connect } from "react-redux";
+import React, { createContext, MouseEvent, useContext } from "react";
 import type {
   APIConnectomeFile,
   APIDataset,
@@ -94,7 +94,12 @@ import {
   proofreadMerge,
 } from "oxalis/model/actions/proofread_actions";
 import { setPositionAction } from "oxalis/model/actions/flycam_actions";
-const { SubMenu } = Menu;
+import {
+  ItemType,
+  MenuItemGroupType,
+  MenuItemType,
+  SubMenuType,
+} from "antd/lib/menu/hooks/useItems";
 
 type ContextMenuContextValue = React.MutableRefObject<HTMLElement | null> | null;
 export const ContextMenuContext = createContext<ContextMenuContextValue>(null);
@@ -153,21 +158,16 @@ type Props = OwnProps & StateProps & DispatchProps;
 type NodeContextMenuOptionsProps = Props & {
   viewport: OrthoView;
   clickedNodeId: number;
-  infoRows: Array<React.ReactNode>;
+  infoRows: ItemType[];
 };
 
 type NoNodeContextMenuProps = Props & {
   viewport: OrthoView;
   segmentIdAtPosition: number;
   activeTool: AnnotationTool;
-  infoRows: Array<React.ReactNode>;
+  infoRows: ItemType[];
 };
 
-const MenuItemWithMappingActivationConfirmation = withMappingActivationConfirmation<
-  MenuItemProps,
-  typeof Menu.Item
->(Menu.Item);
-
 function copyIconWithTooltip(value: string | number, title: string) {
   return (
     <Tooltip title={title}>
@@ -316,43 +316,48 @@ function getMaybeMinCutItem(
   volumeTracing: VolumeTracing | null | undefined,
   userBoundingBoxes: Array<UserBoundingBox>,
   performMinCut: (treeId: number, boundingBoxId?: number | undefined) => void,
-) {
+): SubMenuType | null {
   const seeds = Array.from(clickedTree.nodes.values());
 
   if (volumeTracing == null || seeds.length !== 2) {
     return null;
   }
 
-  return (
-    <SubMenu
-      key="min-cut"
-      title="Perform Min-Cut (Experimental)" // For some reason, antd doesn't pass the ant-dropdown class to the
-      // sub menu itself which makes the label of the item group too big.
-      // Passing the CSS class here fixes it (font-size is 14px instead of
-      // 16px then).
-      popupClassName="ant-dropdown"
-    >
-      <Menu.ItemGroup
-        key="choose-bbox-group"
-        title="Choose a bounding box for the min-cut operation:"
-      >
-        <Menu.Item key="create-new" onClick={() => performMinCut(clickedTree.treeId)}>
-          Use default bounding box
-        </Menu.Item>
-
-        {userBoundingBoxes
-          .filter((bbox) => isBoundingBoxUsableForMinCut(bbox.boundingBox, seeds))
-          .map((bbox) => (
-            <Menu.Item key={bbox.id} onClick={() => performMinCut(clickedTree.treeId, bbox.id)}>
-              {bbox.name || "Unnamed bounding box"}
-            </Menu.Item>
-          ))}
-      </Menu.ItemGroup>
-    </SubMenu>
-  );
+  return {
+    key: "min-cut",
+    label: "Perform Min-Cut (Experimental)",
+    // For some reason, antd doesn't pass the ant-dropdown class to the
+    // sub menu itself which makes the label of the item group too big.
+    // Passing the CSS class here fixes it (font-size is 14px instead of
+    // 16px then).
+    popupClassName: "ant-dropdown",
+    children: [
+      {
+        key: "choose-bbox-group",
+        label: "Choose a bounding box for the min-cut operation:",
+        type: "group", // double check if the group is assigned to right item
+        children: [
+          {
+            key: "create-new",
+            onClick: () => performMinCut(clickedTree.treeId),
+            label: "Use default bounding box",
+          },
+          ...userBoundingBoxes
+            .filter((bbox) => isBoundingBoxUsableForMinCut(bbox.boundingBox, seeds))
+            .map((bbox) => {
+              return {
+                key: bbox.id.toString(),
+                onClick: () => performMinCut(clickedTree.treeId, bbox.id),
+                label: bbox.name || "Unnamed bounding box",
+              };
+            }),
+        ],
+      },
+    ],
+  };
 }
 
-function getMaybeMeshItems(
+function getMeshItems(
   maybeClickedMeshId: number | null | undefined,
   maybeMeshIntersectionPosition: Vector3 | null | undefined,
   visibleSegmentationLayer: APIDataLayer | null | undefined,
@@ -361,54 +366,49 @@ function getMaybeMeshItems(
   hideMesh: (segmentationLayerName: string, meshId: number) => void,
   setPosition: (position: Vector3) => void,
   refreshMesh: (segmentationLayerName: string, meshId: number) => void,
-) {
+): MenuItemType[] {
   if (
     maybeClickedMeshId == null ||
     maybeMeshIntersectionPosition == null ||
     visibleSegmentationLayer == null
   ) {
-    return null;
+    return [];
   }
 
   return [
-    <Menu.Item
-      key="hide-mesh"
-      onClick={() => hideMesh(visibleSegmentationLayer.name, maybeClickedMeshId)}
-    >
-      Hide Mesh
-    </Menu.Item>,
-    <Menu.Item
-      key="reload-mesh"
-      onClick={() => refreshMesh(visibleSegmentationLayer.name, maybeClickedMeshId)}
-    >
-      Reload Mesh
-    </Menu.Item>,
-    <Menu.Item
-      key="jump-to-mesh"
-      onClick={() => {
+    {
+      key: "hide-mesh",
+      onClick: () => hideMesh(visibleSegmentationLayer.name, maybeClickedMeshId),
+      label: "Hide Mesh",
+    },
+    {
+      key: "reload-mesh",
+      onClick: () => refreshMesh(visibleSegmentationLayer.name, maybeClickedMeshId),
+      label: "Reload Mesh",
+    },
+    {
+      key: "jump-to-mesh",
+      onClick: () => {
         const unscaledPosition = V3.divide3(maybeMeshIntersectionPosition, datasetScale);
         setPosition(unscaledPosition);
-      }}
-    >
-      Jump to Position
-    </Menu.Item>,
-    <Menu.Item
-      key="remove-mesh"
-      onClick={() => removeMesh(visibleSegmentationLayer.name, maybeClickedMeshId)}
-    >
-      Remove Mesh
-    </Menu.Item>,
+      },
+      label: "Jump to Position",
+    },
+    {
+      key: "remove-mesh",
+      onClick: () => removeMesh(visibleSegmentationLayer.name, maybeClickedMeshId),
+      label: "Remove Mesh",
+    },
   ];
 }
 
-function NodeContextMenuOptions({
+function getNodeContextMenuOptions({
   skeletonTracing,
   clickedNodeId,
   maybeClickedMeshId,
   maybeMeshIntersectionPosition,
   visibleSegmentationLayer,
   datasetScale,
-  hideContextMenu,
   deleteEdge,
   mergeTrees,
   minCutAgglomerate,
@@ -426,10 +426,9 @@ function NodeContextMenuOptions({
   volumeTracing,
   infoRows,
   allowUpdate,
-}: NodeContextMenuOptionsProps): JSX.Element {
-  const isProofreadingActive = useSelector(
-    (state: OxalisState) => state.uiInformation.activeTool === AnnotationToolEnum.PROOFREAD,
-  );
+}: NodeContextMenuOptionsProps): ItemType[] {
+  const state = Store.getState();
+  const isProofreadingActive = state.uiInformation.activeTool === AnnotationToolEnum.PROOFREAD;
 
   if (skeletonTracing == null) {
     throw new Error(
@@ -442,17 +441,7 @@ function NodeContextMenuOptions({
   const clickedTree = findTreeByNodeId(trees, clickedNodeId);
 
   if (clickedTree == null) {
-    return (
-      <Menu
-        onClick={hideContextMenu}
-        style={{
-          borderRadius: 6,
-        }}
-        mode="vertical"
-      >
-        <Menu.Item disabled>Error: Could not find clicked node</Menu.Item>
-      </Menu>
-    );
+    return [{ key: "disabled-error", disabled: true, label: "Error: Could not find clicked node" }];
   }
 
   const areInSameTree = activeTreeId === clickedTree.treeId;
@@ -467,132 +456,128 @@ function NodeContextMenuOptions({
     );
   }
 
-  return (
-    <Menu
-      onClick={hideContextMenu}
-      style={{
-        borderRadius: 6,
-      }}
-      mode="vertical"
-    >
-      <Menu.Item
-        key="set-node-active"
-        disabled={isTheSameNode}
-        onClick={() => setActiveNode(clickedNodeId)}
-      >
-        Select this Node
-      </Menu.Item>
-      {getMaybeMinCutItem(clickedTree, volumeTracing, userBoundingBoxes, performMinCut)}
-      {allowUpdate ? (
-        <>
-          <Menu.Item
-            key="merge-trees"
-            disabled={areInSameTree}
-            onClick={() => (activeNodeId != null ? mergeTrees(clickedNodeId, activeNodeId) : null)}
-          >
-            Create Edge & Merge with this Tree{" "}
-            {useLegacyBindings ? shortcutBuilder(["Shift", "Alt", "leftMouse"]) : null}
-          </Menu.Item>
-          {isProofreadingActive ? (
-            <Menu.Item
-              key="min-cut-node"
-              disabled={!areInSameTree || isTheSameNode}
-              onClick={() =>
-                activeNodeId != null ? minCutAgglomerate(clickedNodeId, activeNodeId) : null
-              }
-            >
-              Perform Min-Cut between these Nodes
-            </Menu.Item>
-          ) : null}
-          <Menu.Item
-            key="delete-edge"
-            disabled={!areNodesConnected}
-            onClick={() => (activeNodeId != null ? deleteEdge(activeNodeId, clickedNodeId) : null)}
-          >
-            Delete Edge to this Node{" "}
-            {useLegacyBindings ? shortcutBuilder(["Shift", "Ctrl", "leftMouse"]) : null}
-          </Menu.Item>
-          <Menu.Item
-            key="delete-node"
-            onClick={() => deleteNode(clickedNodeId, clickedTree.treeId)}
-          >
-            Delete this Node {activeNodeId === clickedNodeId ? shortcutBuilder(["Del"]) : null}
-          </Menu.Item>
-          {isBranchpoint ? (
-            <Menu.Item
-              className="node-context-menu-item"
-              key="branchpoint-node"
-              onClick={() =>
-                activeNodeId != null
-                  ? deleteBranchpointById(clickedNodeId, clickedTree.treeId)
-                  : null
-              }
-            >
-              Unmark as Branchpoint
-            </Menu.Item>
-          ) : (
-            <Menu.Item
-              className="node-context-menu-item"
-              key="branchpoint-node"
-              onClick={() =>
-                activeNodeId != null ? createBranchPoint(clickedNodeId, clickedTree.treeId) : null
+  const meshItems = getMeshItems(
+    maybeClickedMeshId,
+    maybeMeshIntersectionPosition,
+    visibleSegmentationLayer,
+    datasetScale,
+    removeMesh,
+    hideMesh,
+    setPosition,
+    refreshMesh,
+  );
+
+  const menuItems: ItemType[] = [
+    {
+      key: "set-node-active",
+      disabled: isTheSameNode,
+      onClick: () => setActiveNode(clickedNodeId),
+      label: "Select this Node",
+    },
+    getMaybeMinCutItem(clickedTree, volumeTracing, userBoundingBoxes, performMinCut),
+    ...(allowUpdate
+      ? [
+          {
+            key: "merge-trees",
+            disabled: areInSameTree,
+            onClick: () => (activeNodeId != null ? mergeTrees(clickedNodeId, activeNodeId) : null),
+            label: (
+              <>
+                Create Edge & Merge with this Tree{" "}
+                {useLegacyBindings ? shortcutBuilder(["Shift", "Alt", "leftMouse"]) : null}
+              </>
+            ),
+          },
+          isProofreadingActive
+            ? {
+                key: "min-cut-node",
+                disabled: !areInSameTree || isTheSameNode,
+                onClick: () =>
+                  activeNodeId != null ? minCutAgglomerate(clickedNodeId, activeNodeId) : null,
+                label: "Perform Min-Cut between these Nodes",
               }
-            >
-              Mark as Branchpoint {activeNodeId === clickedNodeId ? shortcutBuilder(["B"]) : null}
-            </Menu.Item>
-          )}
-          {isTheSameNode ? null : (
-            <Menu.Item
-              key="extract-shortest-path"
-              disabled={activeNodeId == null || !areInSameTree || isTheSameNode}
-              onClick={() =>
-                activeNodeId != null
-                  ? extractShortestPathAsNewTree(clickedTree, activeNodeId, clickedNodeId)
-                  : null
+            : null,
+          {
+            key: "delete-edge",
+            disabled: !areNodesConnected,
+            onClick: () => (activeNodeId != null ? deleteEdge(activeNodeId, clickedNodeId) : null),
+            label: (
+              <>
+                Delete Edge to this Node{" "}
+                {useLegacyBindings ? shortcutBuilder(["Shift", "Ctrl", "leftMouse"]) : null}
+              </>
+            ),
+          },
+          {
+            key: "delete-node",
+            onClick: () => deleteNode(clickedNodeId, clickedTree.treeId),
+            label: (
+              <>
+                Delete this Node {activeNodeId === clickedNodeId ? shortcutBuilder(["Del"]) : null}
+              </>
+            ),
+          },
+          isBranchpoint
+            ? {
+                key: "branchpoint-node",
+                className: "node-context-menu-item",
+                onClick: () =>
+                  activeNodeId != null
+                    ? deleteBranchpointById(clickedNodeId, clickedTree.treeId)
+                    : null,
+                label: "Unmark as Branchpoint",
               }
-            >
-              Extract shortest Path to this Node
-            </Menu.Item>
-          )}
-        </>
-      ) : null}
-      {getMaybeMeshItems(
-        maybeClickedMeshId,
-        maybeMeshIntersectionPosition,
-        visibleSegmentationLayer,
-        datasetScale,
-        removeMesh,
-        hideMesh,
-        setPosition,
-        refreshMesh,
-      )}
-      {isTheSameNode ? null : (
-        <Menu.Item
-          key="measure-node-path-length"
-          disabled={activeNodeId == null || !areInSameTree || isTheSameNode}
-          onClick={() =>
+            : {
+                key: "branchpoint-node",
+                className: "node-context-menu-item",
+                onClick: () =>
+                  activeNodeId != null
+                    ? createBranchPoint(clickedNodeId, clickedTree.treeId)
+                    : null,
+                label: (
+                  <>
+                    Mark as Branchpoint{" "}
+                    {activeNodeId === clickedNodeId ? shortcutBuilder(["B"]) : null}
+                  </>
+                ),
+              },
+          isTheSameNode
+            ? null
+            : {
+                key: "extract-shortest-path",
+                disabled: activeNodeId == null || !areInSameTree || isTheSameNode,
+                onClick: () =>
+                  activeNodeId != null
+                    ? extractShortestPathAsNewTree(clickedTree, activeNodeId, clickedNodeId)
+                    : null,
+                label: "Extract shortest Path to this Node",
+              },
+        ]
+      : []),
+    ...meshItems,
+    isTheSameNode
+      ? null
+      : {
+          key: "measure-node-path-length",
+          disabled: activeNodeId == null || !areInSameTree || isTheSameNode,
+          onClick: () =>
             activeNodeId != null
               ? measureAndShowLengthBetweenNodes(activeNodeId, clickedNodeId)
-              : null
-          }
-        >
-          Path Length to this Node
-        </Menu.Item>
-      )}
-      <Menu.Item
-        key="measure-whole-tree-length"
-        onClick={() => measureAndShowFullTreeLength(clickedTree.treeId, clickedTree.name)}
-      >
-        Path Length of this Tree
-      </Menu.Item>
-      {allowUpdate ? (
-        <Menu.Item key="hide-tree" onClick={() => hideTree(clickedTree.treeId)}>
-          Hide this Tree
-        </Menu.Item>
-      ) : null}
-      {infoRows}
-    </Menu>
-  );
+              : null,
+          label: "Path Length to this Node",
+        },
+    {
+      key: "measure-whole-tree-length",
+      onClick: () => measureAndShowFullTreeLength(clickedTree.treeId, clickedTree.name),
+      label: "Path Length of this Tree",
+    },
+    allowUpdate
+      ? { key: "hide-tree", onClick: () => hideTree(clickedTree.treeId), label: "Hide this Tree" }
+      : null,
+    ...infoRows,
+  ];
+
+  return menuItems;
 }
 
 function getBoundingBoxMenuOptions({
@@ -607,35 +592,34 @@ function getBoundingBoxMenuOptions({
   hideBoundingBox,
   deleteBoundingBox,
   allowUpdate,
-}: NoNodeContextMenuProps) {
+}: NoNodeContextMenuProps): ItemType[] {
   if (globalPosition == null) return [];
 
   const isBoundingBoxToolActive = activeTool === AnnotationToolEnum.BOUNDING_BOX;
-  const newBoundingBoxMenuItem = (
-    <Menu.Item
-      key="add-new-bounding-box"
-      onClick={() => {
-        addNewBoundingBox(globalPosition);
-      }}
-    >
-      Create new Bounding Box
-      {isBoundingBoxToolActive ? shortcutBuilder(["C"]) : null}
-    </Menu.Item>
-  );
-  const hideBoundingBoxMenuItem =
-    clickedBoundingBoxId != null ? (
-      <Menu.Item
-        key="hide-bounding-box"
-        onClick={() => {
-          hideBoundingBox(clickedBoundingBoxId);
-        }}
-      >
-        Hide Bounding Box
-      </Menu.Item>
-    ) : null;
+  const newBoundingBoxMenuItem: ItemType = {
+    key: "add-new-bounding-box",
+    onClick: () => {
+      addNewBoundingBox(globalPosition);
+    },
+    label: (
+      <>
+        Create new Bounding Box
+        {isBoundingBoxToolActive ? shortcutBuilder(["C"]) : null}
+      </>
+    ),
+  };
+
   if (!allowUpdate && clickedBoundingBoxId != null) {
+    const hideBoundingBoxMenuItem: MenuItemType = {
+      key: "hide-bounding-box",
+      onClick: () => {
+        hideBoundingBox(clickedBoundingBoxId);
+      },
+      label: "Hide Bounding Box",
+    };
     return [hideBoundingBoxMenuItem];
   }
+
   if (!allowUpdate) {
     return [];
   }
@@ -660,89 +644,94 @@ function getBoundingBoxMenuOptions({
   };
 
   const upscaledBBoxColor = hoveredBBox.color.map((colorPart) => colorPart * 255) as any as Vector3;
+
   return [
     newBoundingBoxMenuItem,
-    <Menu.Item key="change-bounding-box-name">
-      <Popover
-        title="Set Bounding Box Name"
-        content={
-          <Input
-            defaultValue={hoveredBBox.name}
-            placeholder="Bounding Box Name"
-            size="small"
-            onPressEnter={(evt) => {
-              setBBoxName(evt);
-              hideContextMenu();
-            }}
-            onBlur={setBBoxName}
+    {
+      key: "change-bounding-box-name",
+      label: (
+        <Popover
+          title="Set Bounding Box Name"
+          content={
+            <Input
+              defaultValue={hoveredBBox.name}
+              placeholder="Bounding Box Name"
+              size="small"
+              onPressEnter={(evt) => {
+                setBBoxName(evt);
+                hideContextMenu();
+              }}
+              onBlur={setBBoxName}
+              onClick={preventContextMenuFromClosing}
+            />
+          }
+          trigger="click"
+        >
+          <span
             onClick={preventContextMenuFromClosing}
-          />
-        }
-        trigger="click"
-      >
+            style={{
+              width: "100%",
+              display: "inline-block",
+            }}
+          >
+            Change Bounding Box Name
+          </span>
+        </Popover>
+      ),
+    },
+    {
+      key: "change-bounding-box-color",
+      label: (
         <span
           onClick={preventContextMenuFromClosing}
           style={{
             width: "100%",
             display: "inline-block",
+            position: "relative",
           }}
         >
-          Change Bounding Box Name
+          Change Bounding Box Color
+          <input
+            type="color"
+            style={{
+              display: "inline-block",
+              border: "none",
+              cursor: "pointer",
+              width: "100%",
+              height: "100%",
+              position: "absolute",
+              left: 0,
+              top: 0,
+              opacity: 0,
+            }}
+            onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+              let color = hexToRgb(evt.target.value);
+              color = color.map((colorPart) => colorPart / 255) as any as Vector3;
+              setBoundingBoxColor(clickedBoundingBoxId, color);
+            }}
+            value={rgbToHex(upscaledBBoxColor)}
+          />
         </span>
-      </Popover>
-    </Menu.Item>,
-    <Menu.Item key="change-bounding-box-color">
-      <span
-        onClick={preventContextMenuFromClosing}
-        style={{
-          width: "100%",
-          display: "inline-block",
-          position: "relative",
-        }}
-      >
-        Change Bounding Box Color
-        <input
-          type="color"
-          style={{
-            display: "inline-block",
-            border: "none",
-            cursor: "pointer",
-            width: "100%",
-            height: "100%",
-            position: "absolute",
-            left: 0,
-            top: 0,
-            opacity: 0,
-          }}
-          onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
-            let color = hexToRgb(evt.target.value);
-            color = color.map((colorPart) => colorPart / 255) as any as Vector3;
-            setBoundingBoxColor(clickedBoundingBoxId, color);
-          }}
-          value={rgbToHex(upscaledBBoxColor)}
-        />
-      </span>
-    </Menu.Item>,
-    <Menu.Item
-      key="hide-bounding-box"
-      onClick={() => {
+      ),
+    },
+    {
+      key: "hide-bounding-box",
+      onClick: () => {
         hideBoundingBox(clickedBoundingBoxId);
-      }}
-    >
-      Hide Bounding Box
-    </Menu.Item>,
-    <Menu.Item
-      key="delete-bounding-box"
-      onClick={() => {
+      },
+      label: "Hide Bounding Box",
+    },
+    {
+      key: "delete-bounding-box",
+      onClick: () => {
         deleteBoundingBox(clickedBoundingBoxId);
-      }}
-    >
-      Delete Bounding Box
-    </Menu.Item>,
+      },
+      label: "Delete Bounding Box",
+    },
   ];
 }
 
-function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): JSX.Element {
+function getNoNodeContextMenuOptions(props: NoNodeContextMenuProps): ItemType[] {
   const {
     skeletonTracing,
     volumeTracing,
@@ -758,7 +747,6 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): JSX.Element {
     currentMeshFile,
     currentConnectomeFile,
     createTree,
-    hideContextMenu,
     setActiveCell,
     removeMesh,
     hideMesh,
@@ -768,17 +756,14 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): JSX.Element {
     infoRows,
     allowUpdate,
   } = props;
-  const dispatch = useDispatch();
-  const isAgglomerateMappingEnabled = useSelector(hasAgglomerateMapping);
-  const isConnectomeMappingEnabled = useSelector(hasConnectomeFile);
 
-  const isProofreadingActive = useSelector(
-    (state: OxalisState) => state.uiInformation.activeTool === AnnotationToolEnum.PROOFREAD,
-  );
+  const state = Store.getState();
+  const isAgglomerateMappingEnabled = hasAgglomerateMapping(state);
+  const isConnectomeMappingEnabled = hasConnectomeFile(state);
+
+  const isProofreadingActive = state.uiInformation.activeTool === AnnotationToolEnum.PROOFREAD;
 
-  useEffect(() => {
-    dispatch(maybeFetchMeshFilesAction(visibleSegmentationLayer, dataset, false));
-  }, [visibleSegmentationLayer, dataset]);
+  Store.dispatch(maybeFetchMeshFilesAction(visibleSegmentationLayer, dataset, false));
 
   const loadPrecomputedMesh = async () => {
     if (!currentMeshFile || !visibleSegmentationLayer || globalPosition == null) return;
@@ -791,7 +776,9 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): JSX.Element {
       return;
     }
 
-    dispatch(loadPrecomputedMeshAction(segmentId, globalPosition, currentMeshFile.meshFileName));
+    Store.dispatch(
+      loadPrecomputedMeshAction(segmentId, globalPosition, currentMeshFile.meshFileName),
+    );
   };
 
   const computeMeshAdHoc = () => {
@@ -806,74 +793,84 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): JSX.Element {
       return;
     }
 
-    dispatch(loadAdHocMeshAction(segmentId, globalPosition));
+    Store.dispatch(loadAdHocMeshAction(segmentId, globalPosition));
   };
 
   const isVolumeBasedToolActive = VolumeTools.includes(activeTool);
   const isBoundingBoxToolActive = activeTool === AnnotationToolEnum.BOUNDING_BOX;
-  const skeletonActions =
+  const skeletonActions: ItemType[] =
     skeletonTracing != null && globalPosition != null && allowUpdate
       ? [
-          <Menu.Item key="create-node" onClick={() => setWaypoint(globalPosition, viewport, false)}>
-            Create Node here
-          </Menu.Item>,
-          <Menu.Item
-            key="create-node-with-tree"
-            onClick={() => {
+          {
+            key: "create-node",
+            onClick: () => setWaypoint(globalPosition, viewport, false),
+            label: "Create Node here",
+          },
+          {
+            key: "create-node-with-tree",
+            onClick: () => {
               createTree();
               setWaypoint(globalPosition, viewport, false);
-            }}
-          >
-            Create new Tree here{" "}
-            {!isVolumeBasedToolActive && !isBoundingBoxToolActive ? shortcutBuilder(["C"]) : null}
-          </Menu.Item>,
-          <Menu.Item
-            key="load-agglomerate-skeleton"
-            disabled={!isAgglomerateMappingEnabled.value}
-            onClick={() => loadAgglomerateSkeletonAtPosition(globalPosition)}
-          >
-            <Tooltip
-              title={
-                isAgglomerateMappingEnabled.value ? undefined : isAgglomerateMappingEnabled.reason
-              }
-            >
-              <span>Import Agglomerate Skeleton {shortcutBuilder(["SHIFT", "middleMouse"])}</span>
-            </Tooltip>
-          </Menu.Item>,
-          isAgglomerateMappingEnabled.value ? (
-            <Menu.Item
-              key="merge-agglomerate-skeleton"
-              disabled={!isProofreadingActive}
-              onClick={() => Store.dispatch(proofreadMerge(globalPosition))}
-            >
-              <Tooltip
-                title={
-                  isProofreadingActive
-                    ? undefined
-                    : "Cannot merge because the proofreading tool is not active."
-                }
-              >
-                <span>Merge with active segment {shortcutBuilder(["SHIFT", "leftMouse"])}</span>
-              </Tooltip>
-            </Menu.Item>
-          ) : null,
-          isAgglomerateMappingEnabled.value ? (
-            <Menu.Item
-              key="min-cut-agglomerate-at-position"
-              disabled={!isProofreadingActive}
-              onClick={() => Store.dispatch(minCutAgglomerateWithPositionAction(globalPosition))}
-            >
+            },
+            label: (
+              <>
+                Create new Tree here{" "}
+                {!isVolumeBasedToolActive && !isBoundingBoxToolActive
+                  ? shortcutBuilder(["C"])
+                  : null}
+              </>
+            ),
+          },
+          {
+            key: "load-agglomerate-skeleton",
+            disabled: !isAgglomerateMappingEnabled.value,
+            onClick: () => loadAgglomerateSkeletonAtPosition(globalPosition),
+            label: (
               <Tooltip
                 title={
-                  isProofreadingActive
-                    ? undefined
-                    : "Cannot merge because the proofreading tool is not active."
+                  isAgglomerateMappingEnabled.value ? undefined : isAgglomerateMappingEnabled.reason
                 }
               >
-                <span>Split from active segment {shortcutBuilder(["CTRL", "leftMouse"])}</span>
+                <span>Import Agglomerate Skeleton {shortcutBuilder(["SHIFT", "middleMouse"])}</span>
               </Tooltip>
-            </Menu.Item>
-          ) : null,
+            ),
+          },
+          isAgglomerateMappingEnabled.value
+            ? {
+                key: "merge-agglomerate-skeleton",
+                disabled: !isProofreadingActive,
+                onClick: () => Store.dispatch(proofreadMerge(globalPosition)),
+                label: (
+                  <Tooltip
+                    title={
+                      isProofreadingActive
+                        ? undefined
+                        : "Cannot merge because the proofreading tool is not active."
+                    }
+                  >
+                    <span>Merge with active segment {shortcutBuilder(["SHIFT", "leftMouse"])}</span>
+                  </Tooltip>
+                ),
+              }
+            : null,
+          isAgglomerateMappingEnabled.value
+            ? {
+                key: "min-cut-agglomerate-at-position",
+                disabled: !isProofreadingActive,
+                onClick: () => Store.dispatch(minCutAgglomerateWithPositionAction(globalPosition)),
+                label: (
+                  <Tooltip
+                    title={
+                      isProofreadingActive
+                        ? undefined
+                        : "Cannot merge because the proofreading tool is not active."
+                    }
+                  >
+                    <span>Split from active segment {shortcutBuilder(["CTRL", "leftMouse"])}</span>
+                  </Tooltip>
+                ),
+              }
+            : null,
         ]
       : [];
   const segmentationLayerName =
@@ -882,75 +879,73 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): JSX.Element {
   if (visibleSegmentationLayer != null && globalPosition != null) {
     const connectomeFileMappingName =
       currentConnectomeFile != null ? currentConnectomeFile.mappingName : undefined;
-    const loadSynapsesItem = (
-      <MenuItemWithMappingActivationConfirmation
-        className="node-context-menu-item"
-        key="load-synapses"
-        disabled={!isConnectomeMappingEnabled.value}
-        onClick={() => loadSynapsesOfAgglomerateAtPosition(globalPosition)}
-        mappingName={connectomeFileMappingName}
-        descriptor="connectome file"
-        layerName={segmentationLayerName}
-        mappingInfo={mappingInfo}
-      >
-        {isConnectomeMappingEnabled.value ? (
-          "Import Agglomerate and Synapses"
-        ) : (
-          <Tooltip title={isConnectomeMappingEnabled.reason}>
-            Import Agglomerate and Synapses
-          </Tooltip>
-        )}
-      </MenuItemWithMappingActivationConfirmation>
-    );
+    const loadSynapsesItem: MenuItemType = {
+      className: "node-context-menu-item",
+      key: "load-synapses",
+      disabled: !isConnectomeMappingEnabled.value,
+      onClick: withMappingActivationConfirmation(
+        () => loadSynapsesOfAgglomerateAtPosition(globalPosition),
+        connectomeFileMappingName,
+        "connectome file",
+        segmentationLayerName,
+        mappingInfo,
+      ),
+      label: isConnectomeMappingEnabled.value ? (
+        "Import Agglomerate and Synapses"
+      ) : (
+        <Tooltip title={isConnectomeMappingEnabled.reason}>Import Agglomerate and Synapses</Tooltip>
+      ),
+    };
     // This action doesn't need a skeleton tracing but is conceptually related to the "Import Agglomerate Skeleton" action
     skeletonActions.push(loadSynapsesItem);
   }
 
   const meshFileMappingName = currentMeshFile != null ? currentMeshFile.mappingName : undefined;
-  const loadPrecomputedMeshItem = (
-    <MenuItemWithMappingActivationConfirmation
-      key="load-precomputed-mesh"
-      onClick={loadPrecomputedMesh}
-      disabled={!currentMeshFile}
-      mappingName={meshFileMappingName}
-      descriptor="mesh file"
-      layerName={segmentationLayerName}
-      mappingInfo={mappingInfo}
-    >
-      Load Mesh (precomputed)
-    </MenuItemWithMappingActivationConfirmation>
-  );
-  const computeMeshAdHocItem = (
-    <Menu.Item key="compute-mesh-adhc" onClick={computeMeshAdHoc}>
-      Compute Mesh (ad-hoc)
-    </Menu.Item>
-  );
-  const nonSkeletonActions =
+  const loadPrecomputedMeshItem: MenuItemType = {
+    key: "load-precomputed-mesh",
+    disabled: !currentMeshFile,
+    onClick: withMappingActivationConfirmation(
+      loadPrecomputedMesh,
+      meshFileMappingName,
+      "mesh file",
+      segmentationLayerName,
+      mappingInfo,
+    ),
+    label: "Load Mesh (precomputed)",
+  };
+  const computeMeshAdHocItem = {
+    key: "compute-mesh-adhc",
+    onClick: computeMeshAdHoc,
+    label: "Compute Mesh (ad-hoc)",
+  };
+  const nonSkeletonActions: ItemType[] =
     volumeTracing != null && globalPosition != null
       ? [
           // Segment 0 cannot/shouldn't be made active (as this
           // would be an eraser effectively).
-          segmentIdAtPosition > 0 ? (
-            <Menu.Item
-              key="select-cell"
-              onClick={() => {
-                setActiveCell(segmentIdAtPosition, globalPosition);
-              }}
-            >
-              Select Segment ({segmentIdAtPosition}){" "}
-              {isVolumeBasedToolActive ? shortcutBuilder(["Shift", "leftMouse"]) : null}
-            </Menu.Item>
-          ) : null,
+          segmentIdAtPosition > 0
+            ? {
+                key: "select-cell",
+                onClick: () => {
+                  setActiveCell(segmentIdAtPosition, globalPosition);
+                },
+                label: (
+                  <>
+                    Select Segment ({segmentIdAtPosition}){" "}
+                    {isVolumeBasedToolActive ? shortcutBuilder(["Shift", "leftMouse"]) : null}
+                  </>
+                ),
+              }
+            : null,
           loadPrecomputedMeshItem,
           computeMeshAdHocItem,
-          allowUpdate ? (
-            <Menu.Item
-              key="fill-cell"
-              onClick={() => handleFloodFillFromGlobalPosition(globalPosition, viewport)}
-            >
-              Fill Segment (flood-fill region)
-            </Menu.Item>
-          ) : null,
+          allowUpdate
+            ? {
+                key: "fill-cell",
+                onClick: () => handleFloodFillFromGlobalPosition(globalPosition, viewport),
+                label: "Fill Segment (flood-fill region)",
+              }
+            : null,
         ]
       : [];
   const boundingBoxActions = getBoundingBoxMenuOptions(props);
@@ -960,9 +955,9 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): JSX.Element {
   }
 
   const isSkeletonToolActive = activeTool === AnnotationToolEnum.SKELETON;
-  let allActions: Array<JSX.Element | null> = [];
+  let allActions: ItemType[] = [];
 
-  const maybeMeshRelatedItems = getMaybeMeshItems(
+  const meshRelatedItems = getMeshItems(
     maybeClickedMeshId,
     maybeMeshIntersectionPosition,
     visibleSegmentationLayer,
@@ -974,33 +969,25 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): JSX.Element {
   );
 
   if (isSkeletonToolActive) {
-    allActions = skeletonActions.concat(nonSkeletonActions).concat(boundingBoxActions);
+    allActions = [...skeletonActions, ...nonSkeletonActions, ...boundingBoxActions];
   } else if (isBoundingBoxToolActive) {
-    allActions = boundingBoxActions.concat(nonSkeletonActions).concat(skeletonActions);
+    allActions = [...boundingBoxActions, ...nonSkeletonActions, ...skeletonActions];
   } else {
-    allActions = nonSkeletonActions.concat(skeletonActions).concat(boundingBoxActions);
+    allActions = [...nonSkeletonActions, ...skeletonActions, ...boundingBoxActions];
   }
-  if (maybeMeshRelatedItems) {
-    allActions = allActions.concat(maybeMeshRelatedItems);
+  if (meshRelatedItems) {
+    allActions = allActions.concat(meshRelatedItems);
   }
 
-  const empty = (
-    <Menu.Item key="empty">
-      <Empty description="No actions available" image={Empty.PRESENTED_IMAGE_SIMPLE} />
-    </Menu.Item>
-  );
+  const empty: ItemType = {
+    key: "empty",
+    label: <Empty description="No actions available" image={Empty.PRESENTED_IMAGE_SIMPLE} />,
+  };
 
-  return (
-    <Menu
-      onClick={hideContextMenu}
-      style={{
-        borderRadius: 6,
-      }}
-      mode="vertical"
-    >
-      {allActions.length + infoRows.length > 0 ? [...allActions, ...infoRows] : [empty]}
-    </Menu>
-  );
+  const menuItems =
+    allActions.length + infoRows.length > 0 ? [...allActions, ...infoRows] : [empty];
+
+  return menuItems;
 }
 
 export function GenericContextMenuContainer(props: {
@@ -1083,19 +1070,17 @@ function ContextMenuContainer(props: Props) {
   );
 }
 
-function InfoMenuItem(propsWithEventKey: MenuItemProps) {
+function getInfoMenuItem(
+  key: MenuItemType["key"],
+  label: MenuItemType["label"],
+): MenuItemGroupType {
   /*
-   * This component can be used within an antd Menu, even though
-   * the docs dictate to always use a <Menu.Item /> or <Menu.Divider />.
-   * However, we want non-clickable info rows with a special styling here.
-   * Note that we must not pass along all props here, since antd will pass
-   * an eventKey prop to this component. Delegating this to <div /> will
-   * produce a "React does not recognize the `eventKey` prop on a DOM element"
-   * warning.
+   * This component is a work-around. We want antd menu entries that can not be selected
+   * or otherwise interacted with. An "empty" menu group will only display the group header
+   * which gives us the desired behavior.
    */
 
-  const { children } = propsWithEventKey;
-  return <div className="node-context-menu-item">{children}</div>;
+  return { key, label, type: "group" };
 }
 
 function ContextMenuInner(propsWithInputRef: Props) {
@@ -1112,143 +1097,162 @@ function ContextMenuInner(propsWithInputRef: Props) {
     globalPosition,
     maybeViewport,
   } = props;
-  let overlay = <div />;
 
-  if (contextMenuPosition != null && maybeViewport != null) {
-    const activeTreeId = skeletonTracing != null ? skeletonTracing.activeTreeId : null;
-    const activeNodeId = skeletonTracing?.activeNodeId;
+  if (contextMenuPosition == null || maybeViewport == null) {
+    return <></>;
+  }
 
-    let nodeContextMenuTree: Tree | null = null;
-    let nodeContextMenuNode: MutableNode | null = null;
+  const activeTreeId = skeletonTracing != null ? skeletonTracing.activeTreeId : null;
+  const activeNodeId = skeletonTracing?.activeNodeId;
 
-    if (skeletonTracing != null && maybeClickedNodeId != null) {
-      getNodeAndTree(skeletonTracing, maybeClickedNodeId).map(([tree, node]) => {
-        nodeContextMenuNode = node;
-        nodeContextMenuTree = tree;
-      });
-    }
+  let nodeContextMenuTree: Tree | null = null;
+  let nodeContextMenuNode: MutableNode | null = null;
 
-    const positionToMeasureDistanceTo =
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'position' does not exist on type 'never'... Remove this comment to see the full error message
-      nodeContextMenuNode != null ? nodeContextMenuNode.position : globalPosition;
-    const activeNode =
-      activeNodeId != null && skeletonTracing != null
-        ? getNodeAndTree(skeletonTracing, activeNodeId, activeTreeId).get()[1]
-        : null;
-    const distanceToSelection =
-      activeNode != null && positionToMeasureDistanceTo != null
-        ? [
-            formatNumberToLength(
-              V3.scaledDist(activeNode.position, positionToMeasureDistanceTo, datasetScale),
-            ),
-            formatLengthAsVx(V3.length(V3.sub(activeNode.position, positionToMeasureDistanceTo))),
-          ]
-        : null;
-    const nodePositionAsString =
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'position' does not exist on type 'never'... Remove this comment to see the full error message
-      nodeContextMenuNode != null ? positionToString(nodeContextMenuNode.position) : "";
-    const segmentIdAtPosition =
-      globalPosition != null ? getSegmentIdForPosition(globalPosition) : 0;
-    const infoRows = [];
-
-    if (maybeClickedNodeId != null && nodeContextMenuTree != null) {
-      infoRows.push(
-        <InfoMenuItem key="nodeInfo">
-          {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'treeId' does not exist on type 'never'.*/}
-          Node with Id {maybeClickedNodeId} in Tree {nodeContextMenuTree.treeId}
-        </InfoMenuItem>,
-      );
-    }
+  if (skeletonTracing != null && maybeClickedNodeId != null) {
+    getNodeAndTree(skeletonTracing, maybeClickedNodeId).map(([tree, node]) => {
+      nodeContextMenuNode = node;
+      nodeContextMenuTree = tree;
+    });
+  }
 
-    if (nodeContextMenuNode != null) {
-      infoRows.push(
-        <InfoMenuItem key="positionInfo">
-          Position: {nodePositionAsString}
+  const positionToMeasureDistanceTo =
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'position' does not exist on type 'never'... Remove this comment to see the full error message
+    nodeContextMenuNode != null ? nodeContextMenuNode.position : globalPosition;
+  const activeNode =
+    activeNodeId != null && skeletonTracing != null
+      ? getNodeAndTree(skeletonTracing, activeNodeId, activeTreeId).get()[1]
+      : null;
+  const distanceToSelection =
+    activeNode != null && positionToMeasureDistanceTo != null
+      ? [
+          formatNumberToLength(
+            V3.scaledDist(activeNode.position, positionToMeasureDistanceTo, datasetScale),
+          ),
+          formatLengthAsVx(V3.length(V3.sub(activeNode.position, positionToMeasureDistanceTo))),
+        ]
+      : null;
+  const nodePositionAsString =
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'position' does not exist on type 'never'... Remove this comment to see the full error message
+    nodeContextMenuNode != null ? positionToString(nodeContextMenuNode.position) : "";
+  const segmentIdAtPosition = globalPosition != null ? getSegmentIdForPosition(globalPosition) : 0;
+  const infoRows = [];
+
+  if (maybeClickedNodeId != null && nodeContextMenuTree != null) {
+    infoRows.push(
+      getInfoMenuItem(
+        "nodeInfo",
+        // @ts-expect-error FIXME: Property 'treeId' does not exist on type 'never'... Remove this comment to see the full error message
+        `Node with Id ${maybeClickedNodeId} in Tree ${nodeContextMenuTree.treeId}`,
+      ),
+    );
+  }
+
+  if (nodeContextMenuNode != null) {
+    infoRows.push(
+      getInfoMenuItem(
+        "positionInfo",
+        <>
+          <PushpinOutlined style={{ transform: "rotate(-45deg)" }} /> Position:{" "}
+          {nodePositionAsString}
           {copyIconWithTooltip(nodePositionAsString, "Copy node position")}
-        </InfoMenuItem>,
-      );
-    } else if (globalPosition != null) {
-      const positionAsString = positionToString(globalPosition);
-      infoRows.push(
-        <InfoMenuItem key="positionInfo">
-          Position: {positionAsString}
+        </>,
+      ),
+    );
+  } else if (globalPosition != null) {
+    const positionAsString = positionToString(globalPosition);
+    infoRows.push(
+      getInfoMenuItem(
+        "positionInfo",
+        <>
+          <PushpinOutlined style={{ transform: "rotate(-45deg)" }} /> Position: {positionAsString}
           {copyIconWithTooltip(positionAsString, "Copy position")}
-        </InfoMenuItem>,
-      );
-    }
+        </>,
+      ),
+    );
+  }
 
-    if (distanceToSelection != null) {
-      infoRows.push(
-        <InfoMenuItem key="distanceInfo">
+  if (distanceToSelection != null) {
+    infoRows.push(
+      getInfoMenuItem(
+        "distanceInfo",
+        <>
           <i className="fas fa-ruler" /> {distanceToSelection[0]} ({distanceToSelection[1]}) to this{" "}
           {maybeClickedNodeId != null ? "Node" : "Position"}
           {copyIconWithTooltip(distanceToSelection[0], "Copy the distance")}
-        </InfoMenuItem>,
-      );
-    }
+        </>,
+      ),
+    );
+  }
 
-    // Currently either segmentIdAtPosition or maybeClickedMeshId is set, but not both.
-    // segmentIdAtPosition is only set if a segment is hovered in one of the xy, xz, or yz viewports.
-    // maybeClickedMeshId is only set, when a mesh is hovered in the 3d viewport.
-    // Thus the segment id is always unambiguous / clearly defined.
-    if (segmentIdAtPosition > 0 || maybeClickedMeshId != null) {
-      const segmentId = maybeClickedMeshId ? maybeClickedMeshId : segmentIdAtPosition;
-      infoRows.push(
-        <InfoMenuItem key="copy-cell">
+  // Currently either segmentIdAtPosition or maybeClickedMeshId is set, but not both.
+  // segmentIdAtPosition is only set if a segment is hovered in one of the xy, xz, or yz viewports.
+  // maybeClickedMeshId is only set, when a mesh is hovered in the 3d viewport.
+  // Thus the segment id is always unambiguous / clearly defined.
+  if (segmentIdAtPosition > 0 || maybeClickedMeshId != null) {
+    const segmentId = maybeClickedMeshId ? maybeClickedMeshId : segmentIdAtPosition;
+    infoRows.push(
+      getInfoMenuItem(
+        "copy-cell",
+        <>
           <div className="cell-context-icon" />
           Segment ID: {`${segmentId}`} {copyIconWithTooltip(segmentId, "Copy Segment ID")}
-        </InfoMenuItem>,
-      );
-    }
-    if (segments != null && maybeClickedMeshId != null) {
-      const segmentName = segments.get(maybeClickedMeshId)?.name;
-      if (segmentName != null) {
-        const maxSegmentNameLength = 18;
-        infoRows.push(
-          <InfoMenuItem key="copy-cell">
+        </>,
+      ),
+    );
+  }
+  if (segments != null && maybeClickedMeshId != null) {
+    const segmentName = segments.get(maybeClickedMeshId)?.name;
+    if (segmentName != null) {
+      const maxSegmentNameLength = 18;
+      infoRows.push(
+        getInfoMenuItem(
+          "copy-cell",
+          <>
             <Tooltip title="Segment Name">
               <i className="fas fa-tag" />{" "}
             </Tooltip>
             <Tooltip title={segmentName.length > maxSegmentNameLength ? segmentName : null}>
               {truncateStringToLength(segmentName, maxSegmentNameLength)}
             </Tooltip>
-          </InfoMenuItem>,
-        );
-      }
-    }
-
-    if (infoRows.length > 0) {
-      infoRows.unshift(
-        <Menu.Divider
-          key="divider"
-          className="hide-if-first hide-if-last"
-          style={{
-            margin: "4px 0px",
-          }}
-        />,
+          </>,
+        ),
       );
     }
+  }
 
-    // It's important to not use <NodeContextMenuOptions ...>
-    // or <NoNodeContextMenuOptions ... />
-    // for the following two expressions, since this breaks
-    // antd's internal population of the correct class names
-    // for the menu.
-    overlay =
+  if (infoRows.length > 0) {
+    infoRows.unshift({
+      key: "divider",
+      type: "divider",
+      className: "hide-if-first hide-if-last",
+      style: {
+        margin: "4px 0px",
+      },
+    });
+  }
+
+  const menu: MenuProps = {
+    onClick: hideContextMenu,
+    style: {
+      borderRadius: 6,
+    },
+    mode: "vertical",
+    items:
       maybeClickedNodeId != null
-        ? NodeContextMenuOptions({
+        ? getNodeContextMenuOptions({
             clickedNodeId: maybeClickedNodeId,
             infoRows,
             viewport: maybeViewport,
             ...props,
           })
-        : NoNodeContextMenuOptions({
+        : getNoNodeContextMenuOptions({
             segmentIdAtPosition,
             infoRows,
             viewport: maybeViewport,
             ...props,
-          });
-  }
+          }),
+  };
+
   if (inputRef == null || inputRef.current == null) return null;
   const refContent = inputRef.current;
 
@@ -1256,7 +1260,7 @@ function ContextMenuInner(propsWithInputRef: Props) {
     <React.Fragment>
       <Shortcut supportInputElements keys="escape" onTrigger={hideContextMenu} />
       <Dropdown
-        overlay={overlay}
+        menu={menu}
         overlayClassName="dropdown-overlay-container-for-context-menu"
         open={contextMenuPosition != null}
         getPopupContainer={() => refContent}
diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/comment_tab/comment_tab_view.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/comment_tab/comment_tab_view.tsx
index dd2b8ac50d6..21de6458b58 100644
--- a/frontend/javascripts/oxalis/view/right-border-tabs/comment_tab/comment_tab_view.tsx
+++ b/frontend/javascripts/oxalis/view/right-border-tabs/comment_tab/comment_tab_view.tsx
@@ -1,6 +1,6 @@
 import { AutoSizer, List } from "react-virtualized";
 import type { Dispatch } from "redux";
-import { Input, Menu, Dropdown, Tooltip } from "antd";
+import { Input, Dropdown, Tooltip } from "antd";
 import {
   ArrowLeftOutlined,
   ArrowRightOutlined,
@@ -36,6 +36,7 @@ import Store from "oxalis/store";
 import TreeWithComments from "oxalis/view/right-border-tabs/comment_tab/tree_with_comments";
 import messages from "messages";
 import AdvancedSearchPopover from "../advanced_search_popover";
+import { MenuProps } from "rc-menu";
 const InputGroup = Input.Group;
 const treeTypeHint = [] as Array<Tree>;
 const commentTypeHint = [] as Array<CommentType>;
@@ -347,20 +348,27 @@ class CommentTabView extends React.Component<PropsWithSkeleton, CommentTabState>
     return <i className={iconClass} />;
   }
 
-  renderSortDropdown() {
-    return (
-      <Menu selectedKeys={[this.state.sortBy]} onClick={this.handleChangeSorting}>
-        <Menu.Item key={SortByEnum.NAME}>by name</Menu.Item>
-        <Menu.Item key={SortByEnum.ID}>by creation time</Menu.Item>
-        <Menu.Item key={SortByEnum.NATURAL}>
-          by name (natural sort)
-          <Tooltip title={messages["tracing.natural_sorting"]} placement="bottomLeft">
-            {" "}
-            <InfoCircleOutlined />
-          </Tooltip>
-        </Menu.Item>
-      </Menu>
-    );
+  getSortDropdown(): MenuProps {
+    return {
+      selectedKeys: [this.state.sortBy],
+      onClick: this.handleChangeSorting,
+      items: [
+        { key: SortByEnum.NAME, label: "by name" },
+        { key: SortByEnum.ID, label: "by creation time" },
+        {
+          key: SortByEnum.NATURAL,
+          label: (
+            <>
+              by name (natural sort)
+              <Tooltip title={messages["tracing.natural_sorting"]} placement="bottomLeft">
+                {" "}
+                <InfoCircleOutlined />
+              </Tooltip>
+            </>
+          ),
+        },
+      ],
+    };
   }
 
   getData(): Array<Tree | CommentType> {
@@ -486,7 +494,7 @@ class CommentTabView extends React.Component<PropsWithSkeleton, CommentTabState>
                     onClick={() => this.nextComment()}
                     icon={<ArrowRightOutlined />}
                   />
-                  <Dropdown overlay={this.renderSortDropdown()} trigger={["click"]}>
+                  <Dropdown menu={this.getSortDropdown()} trigger={["click"]}>
                     <ButtonComponent title="Sort" onClick={this.toggleSortingDirection}>
                       {this.renderSortIcon()}
                     </ButtonComponent>
diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/connectome_tab/synapse_tree.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/connectome_tab/synapse_tree.tsx
index 3fc1c99ecb6..c07f812c6ce 100644
--- a/frontend/javascripts/oxalis/view/right-border-tabs/connectome_tab/synapse_tree.tsx
+++ b/frontend/javascripts/oxalis/view/right-border-tabs/connectome_tab/synapse_tree.tsx
@@ -1,5 +1,5 @@
 import { AutoSizer } from "react-virtualized";
-import { Dropdown, Menu, Tag, Tree, TreeProps } from "antd";
+import { Dropdown, MenuProps, Tag, Tree, TreeProps } from "antd";
 import React from "react";
 import _ from "lodash";
 import memoizeOne from "memoize-one";
@@ -191,17 +191,19 @@ class SynapseTree extends React.Component<Props, State> {
     Store.dispatch(updateTemporarySettingAction("hoveredSegmentId", agglomerateId || null));
   }
 
-  createSegmentDropdownMenu = (agglomerateId: number) => (
-    <Menu>
-      <Menu.Item
-        key="setActiveAgglomerateId"
-        onClick={() => this.props.onChangeActiveAgglomerateIds([agglomerateId])}
-        title="Show All Synapses of This Segment"
-      >
-        Show All Synapses of This Segment
-      </Menu.Item>
-    </Menu>
-  );
+  createSegmentDropdownMenu = (agglomerateId: number): MenuProps => {
+    return {
+      items: [
+        {
+          key: "setActiveAgglomerateId",
+          onClick: () => this.props.onChangeActiveAgglomerateIds([agglomerateId]),
+          title: "Show All Synapses of This Segment",
+
+          label: "Show All Synapses of This Segment",
+        },
+      ],
+    };
+  };
 
   renderNode = (node: TreeNode) => {
     const { data, key } = node;
@@ -215,8 +217,9 @@ class SynapseTree extends React.Component<Props, State> {
         title = node.title;
       } else {
         title = (
-          <Dropdown // Lazily create the dropdown menu and destroy it again, afterwards
-            overlay={() => this.createSegmentDropdownMenu(data.id)}
+          <Dropdown
+            menu={this.createSegmentDropdownMenu(data.id)}
+            // AutoDestroy is used to remove the menu from DOM and keep up the performance.
             autoDestroy
             placement="bottom"
             open={this.state.activeSegmentDropdownKey === key}
diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/dataset_info_tab_view.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/dataset_info_tab_view.tsx
index 33c90bab5d5..2c18991ecf7 100644
--- a/frontend/javascripts/oxalis/view/right-border-tabs/dataset_info_tab_view.tsx
+++ b/frontend/javascripts/oxalis/view/right-border-tabs/dataset_info_tab_view.tsx
@@ -1,5 +1,5 @@
 import type { Dispatch } from "redux";
-import { Tooltip, Button, Dropdown, Menu } from "antd";
+import { Tooltip, Button, Dropdown } from "antd";
 import { SettingOutlined, InfoCircleOutlined, StarOutlined } from "@ant-design/icons";
 import { connect } from "react-redux";
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'reac... Remove this comment to see the full error message
@@ -26,8 +26,9 @@ import {
   NeuronInferralModal,
 } from "oxalis/view/right-border-tabs/starting_job_modals";
 import { formatUserName } from "oxalis/model/accessors/user_accessor";
-import { mayUserEditDataset } from "libs/utils";
 import { mayEditAnnotationProperties } from "oxalis/model/accessors/annotation_accessor";
+import { mayUserEditDataset } from "libs/utils";
+import { MenuItemType } from "antd/lib/menu/hooks/useItems";
 
 const enum StartableJobsEnum {
   NUCLEI_INFERRAL = "nuclei inferral",
@@ -303,36 +304,34 @@ class DatasetInfoTabView extends React.PureComponent<Props, State> {
       );
     }
 
-    const jobMenuItems = [
-      <Menu.Item
-        key="start_nuclei_inferal"
-        onClick={() =>
+    const jobMenuItems: MenuItemType[] = [
+      {
+        key: "start_nuclei_inferal",
+        onClick: () =>
           this.setState({
             showJobsDetailsModal: StartableJobsEnum.NUCLEI_INFERRAL,
-          })
-        }
-      >
-        <Tooltip title="Start a job that automatically detects nuclei for this dataset.">
-          Start Nuclei Inferral
-        </Tooltip>
-      </Menu.Item>,
+          }),
+        label: (
+          <Tooltip title="Start a job that automatically detects nuclei for this dataset.">
+            Start Nuclei Inferral
+          </Tooltip>
+        ),
+      },
     ];
 
     if (this.props.activeUser?.isSuperUser) {
-      jobMenuItems.push(
-        <Menu.Item
-          key="start_neuron_inferral"
-          onClick={() =>
-            this.setState({
-              showJobsDetailsModal: StartableJobsEnum.NEURON_INFERRAL,
-            })
-          }
-        >
+      jobMenuItems.push({
+        key: "start_neuron_inferral",
+        onClick: () =>
+          this.setState({
+            showJobsDetailsModal: StartableJobsEnum.NEURON_INFERRAL,
+          }),
+        label: (
           <Tooltip title="Start a job that automatically reconstructs neurons for this dataset.">
             Start Neuron Inferral
           </Tooltip>
-        </Menu.Item>,
-      );
+        ),
+      });
     }
 
     return (
@@ -352,7 +351,7 @@ class DatasetInfoTabView extends React.PureComponent<Props, State> {
           />
         </td>
         <Dropdown
-          overlay={<Menu>{jobMenuItems}</Menu>}
+          menu={{ items: jobMenuItems }}
           overlayStyle={{
             minWidth: "unset",
           }}
diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx
index c8d2ab0edb2..92339c6c998 100644
--- a/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx
+++ b/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx
@@ -5,7 +5,7 @@ import {
   VerticalAlignBottomOutlined,
   EllipsisOutlined,
 } from "@ant-design/icons";
-import { List, Tooltip, Dropdown, Menu, MenuItemProps } from "antd";
+import { List, Tooltip, Dropdown, MenuProps } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import Checkbox, { CheckboxChangeEvent } from "antd/lib/checkbox/Checkbox";
 import React from "react";
@@ -22,7 +22,6 @@ import {
   refreshIsosurfaceAction,
 } from "oxalis/model/actions/annotation_actions";
 import EditableTextLabel from "oxalis/view/components/editable_text_label";
-import { withMappingActivationConfirmation } from "oxalis/view/right-border-tabs/segments_tab/segments_view_helper";
 import type { ActiveMappingInfo, IsosurfaceInformation, OxalisState, Segment } from "oxalis/store";
 import Store from "oxalis/store";
 import { getSegmentColorAsHSLA } from "oxalis/model/accessors/volumetracing_accessor";
@@ -30,6 +29,8 @@ import Toast from "libs/toast";
 import { hslaToCSS } from "oxalis/shaders/utils.glsl";
 import { V4 } from "libs/mjs";
 import { ChangeColorMenuItemContent } from "components/color_picker";
+import { MenuItemType } from "antd/lib/menu/hooks/useItems";
+import { withMappingActivationConfirmation } from "./segments_view_helper";
 
 function ColoredDotIconForSegment({ segmentColorHSLA }: { segmentColorHSLA: Vector4 }) {
   const hslaCss = hslaToCSS(segmentColorHSLA);
@@ -45,11 +46,6 @@ function ColoredDotIconForSegment({ segmentColorHSLA }: { segmentColorHSLA: Vect
   );
 }
 
-const MenuItemWithMappingActivationConfirmation = withMappingActivationConfirmation<
-  MenuItemProps,
-  typeof Menu.Item
->(Menu.Item);
-
 const getLoadPrecomputedMeshMenuItem = (
   segment: Segment,
   currentMeshFile: APIMeshFile | null | undefined,
@@ -59,10 +55,11 @@ const getLoadPrecomputedMeshMenuItem = (
   mappingInfo: ActiveMappingInfo,
 ) => {
   const mappingName = currentMeshFile != null ? currentMeshFile.mappingName : undefined;
-  return (
-    <MenuItemWithMappingActivationConfirmation
-      key="loadPrecomputedMesh"
-      onClick={() => {
+  return {
+    key: "loadPrecomputedMesh",
+    disabled: !currentMeshFile,
+    onClick: withMappingActivationConfirmation(
+      () => {
         if (!currentMeshFile) {
           return;
         }
@@ -78,13 +75,13 @@ const getLoadPrecomputedMeshMenuItem = (
         andCloseContextMenu(
           loadPrecomputedMesh(segment.id, segment.somePosition, currentMeshFile?.meshFileName),
         );
-      }}
-      disabled={!currentMeshFile}
-      mappingName={mappingName}
-      descriptor="mesh file"
-      layerName={layerName}
-      mappingInfo={mappingInfo}
-    >
+      },
+      mappingName,
+      "mesh file",
+      layerName,
+      mappingInfo,
+    ),
+    label: (
       <Tooltip
         key="tooltip"
         title={
@@ -95,8 +92,8 @@ const getLoadPrecomputedMeshMenuItem = (
       >
         Load Mesh (precomputed)
       </Tooltip>
-    </MenuItemWithMappingActivationConfirmation>
-  );
+    ),
+  };
 };
 
 const getComputeMeshAdHocMenuItem = (
@@ -104,29 +101,26 @@ const getComputeMeshAdHocMenuItem = (
   loadAdHocMesh: (arg0: number, arg1: Vector3) => void,
   isSegmentationLayerVisible: boolean,
   andCloseContextMenu: (_ignore?: any) => void,
-) => {
+): MenuItemType => {
   const { disabled, title } = getComputeMeshAdHocTooltipInfo(false, isSegmentationLayerVisible);
-  return (
-    <Menu.Item
-      key="loadAdHocMesh"
-      onClick={() => {
-        if (!segment.somePosition) {
-          Toast.info(
-            <React.Fragment>
-              Cannot load a mesh for this segment, because its position is unknown.
-            </React.Fragment>,
-          );
-          andCloseContextMenu();
-          return;
-        }
+  return {
+    key: "loadAdHocMesh",
+    onClick: () => {
+      if (!segment.somePosition) {
+        Toast.info(
+          <React.Fragment>
+            Cannot load a mesh for this segment, because its position is unknown.
+          </React.Fragment>,
+        );
+        andCloseContextMenu();
+        return;
+      }
 
-        andCloseContextMenu(loadAdHocMesh(segment.id, segment.somePosition));
-      }}
-      disabled={disabled}
-    >
-      <Tooltip title={title}>Compute Mesh (ad hoc)</Tooltip>
-    </Menu.Item>
-  );
+      andCloseContextMenu(loadAdHocMesh(segment.id, segment.somePosition));
+    },
+    disabled,
+    label: <Tooltip title={title}>Compute Mesh (ad hoc)</Tooltip>,
+  };
 };
 
 const getMakeSegmentActiveMenuItem = (
@@ -134,20 +128,17 @@ const getMakeSegmentActiveMenuItem = (
   setActiveCell: (arg0: number, somePosition?: Vector3) => void,
   activeCellId: number | null | undefined,
   andCloseContextMenu: (_ignore?: any) => void,
-) => {
+): MenuItemType => {
   const disabled = segment.id === activeCellId;
   const title = disabled
     ? "This segment ID is already active."
     : "Make this the active segment ID.";
-  return (
-    <Menu.Item
-      key="setActiveCell"
-      onClick={() => andCloseContextMenu(setActiveCell(segment.id, segment.somePosition))}
-      disabled={disabled}
-    >
-      <Tooltip title={title}>Activate Segment ID</Tooltip>
-    </Menu.Item>
-  );
+  return {
+    key: "setActiveCell",
+    onClick: () => andCloseContextMenu(setActiveCell(segment.id, segment.somePosition)),
+    disabled,
+    label: <Tooltip title={title}>Activate Segment ID</Tooltip>,
+  };
 };
 
 type Props = {
@@ -355,54 +346,57 @@ function _SegmentListItem({
 
   const andCloseContextMenu = (_ignore?: any) => handleSegmentDropdownMenuVisibility(0, false);
 
-  const createSegmentContextMenu = () => (
-    <Menu>
-      {getLoadPrecomputedMeshMenuItem(
+  const createSegmentContextMenu = (): MenuProps => ({
+    items: [
+      getLoadPrecomputedMeshMenuItem(
         segment,
         currentMeshFile,
         loadPrecomputedMesh,
         andCloseContextMenu,
         visibleSegmentationLayer != null ? visibleSegmentationLayer.name : null,
         mappingInfo,
-      )}
-      {getComputeMeshAdHocMenuItem(
+      ),
+      getComputeMeshAdHocMenuItem(
         segment,
         loadAdHocMesh,
         visibleSegmentationLayer != null,
         andCloseContextMenu,
-      )}
-      {getMakeSegmentActiveMenuItem(segment, setActiveCell, activeCellId, andCloseContextMenu)}
-      {/*
+      ),
+      getMakeSegmentActiveMenuItem(segment, setActiveCell, activeCellId, andCloseContextMenu),
+      /*
        * Disable the change-color menu if the segment was mapped to another segment, because
        * changing the color wouldn't do anything as long as the mapping is still active.
        * This is because the id (A) is mapped to another one (B). So, the user would need
        * to change the color of B to see the effect for A.
-       */}
-      <Menu.Item key="changeSegmentColor" disabled={isEditingDisabled || segment.id !== mappedId}>
-        <ChangeColorMenuItemContent
-          isDisabled={isEditingDisabled}
-          title="Change Segment Color"
-          onSetColor={(color) => {
-            if (visibleSegmentationLayer == null) {
-              return;
-            }
-            updateSegment(
-              segment.id,
-              {
-                color,
-              },
-              visibleSegmentationLayer.name,
-            );
-          }}
-          rgb={Utils.take3(segmentColorRGBA)}
-          hidePickerIcon
-        />
-      </Menu.Item>
-
-      <Menu.Item
-        key="resetSegmentColor"
-        disabled={isEditingDisabled || segment.color == null}
-        onClick={() => {
+       */
+      {
+        key: "changeSegmentColor",
+        disabled: isEditingDisabled || segment.id !== mappedId,
+        label: (
+          <ChangeColorMenuItemContent
+            isDisabled={isEditingDisabled}
+            title="Change Segment Color"
+            onSetColor={(color) => {
+              if (visibleSegmentationLayer == null) {
+                return;
+              }
+              updateSegment(
+                segment.id,
+                {
+                  color,
+                },
+                visibleSegmentationLayer.name,
+              );
+            }}
+            rgb={Utils.take3(segmentColorRGBA)}
+            hidePickerIcon
+          />
+        ),
+      },
+      {
+        key: "resetSegmentColor",
+        disabled: isEditingDisabled || segment.color == null,
+        onClick: () => {
           if (isEditingDisabled || visibleSegmentationLayer == null) {
             return;
           }
@@ -413,12 +407,11 @@ function _SegmentListItem({
             },
             visibleSegmentationLayer.name,
           );
-        }}
-      >
-        Reset Segment Color
-      </Menu.Item>
-    </Menu>
-  );
+        },
+        label: "Reset Segment Color",
+      },
+    ],
+  });
 
   function getSegmentIdDetails() {
     if (isJSONMappingEnabled && segment.id !== mappedId)
@@ -454,7 +447,7 @@ function _SegmentListItem({
       }}
     >
       <Dropdown
-        overlay={createSegmentContextMenu} // The overlay is generated lazily. By default, this would make the overlay
+        menu={createSegmentContextMenu()} // The overlay is generated lazily. By default, this would make the overlay
         // re-render on each parent's render() after it was shown for the first time.
         // The reason for this is that it's not destroyed after closing.
         // Therefore, autoDestroy is passed.
diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view_helper.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view_helper.tsx
index 40938cbdcac..43df6d03d63 100644
--- a/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view_helper.tsx
+++ b/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view_helper.tsx
@@ -1,15 +1,13 @@
-import type { ComponentType } from "react";
-import React from "react";
 import { Modal } from "antd";
 import type { APIDataLayer } from "types/api_flow_types";
-import type { ActiveMappingInfo, OxalisState } from "oxalis/store";
+import type { ActiveMappingInfo } from "oxalis/store";
 import Store from "oxalis/store";
 import { MappingStatusEnum } from "oxalis/constants";
 import { setMappingAction, setMappingEnabledAction } from "oxalis/model/actions/settings_actions";
 import { waitForCondition } from "libs/utils";
 import { getMappingInfo } from "oxalis/model/accessors/dataset_accessor";
-import { useSelector } from "react-redux";
 import { getEditableMappingForVolumeTracingId } from "oxalis/model/accessors/volumetracing_accessor";
+import type { MenuClickEventHandler } from "rc-menu/lib/interface";
 
 const { confirm } = Modal;
 
@@ -20,87 +18,67 @@ export function getBaseSegmentationName(segmentationLayer: APIDataLayer) {
   );
 }
 
-type MappingActivationConfirmationProps<R> = R & {
-  mappingName: string | null | undefined;
-  descriptor: string;
-  layerName: string | null | undefined;
-  mappingInfo: ActiveMappingInfo;
-  onClick: (...args: Array<any>) => any;
-};
-export function withMappingActivationConfirmation<P, C extends ComponentType<P>>(
-  WrappedComponent: C,
-): ComponentType<MappingActivationConfirmationProps<P>> {
-  return function ComponentWithMappingActivationConfirmation(
-    props: MappingActivationConfirmationProps<P>,
-  ) {
-    const {
-      mappingName,
-      descriptor,
-      layerName,
-      mappingInfo,
-      onClick: originalOnClick,
-      ...rest
-    } = props;
+export function withMappingActivationConfirmation(
+  originalOnClick: MenuClickEventHandler,
+  mappingName: string | null | undefined,
+  descriptor: string,
+  layerName: string | null | undefined,
+  mappingInfo: ActiveMappingInfo,
+) {
+  const editableMapping = getEditableMappingForVolumeTracingId(Store.getState(), layerName);
 
-    const editableMapping = useSelector((state: OxalisState) =>
-      getEditableMappingForVolumeTracingId(state, layerName),
-    );
+  const isMappingEnabled = mappingInfo.mappingStatus === MappingStatusEnum.ENABLED;
+  const enabledMappingName = isMappingEnabled ? mappingInfo.mappingName : null;
 
-    const isMappingEnabled = mappingInfo.mappingStatus === MappingStatusEnum.ENABLED;
-    const enabledMappingName = isMappingEnabled ? mappingInfo.mappingName : null;
+  // If the mapping name is undefined, no mapping is specified. In that case never show the activation modal.
+  // In contrast, if the mapping name is null, this indicates that all mappings should be specifically disabled.
+  if (mappingName === undefined || layerName == null || mappingName === enabledMappingName) {
+    return originalOnClick;
+  }
 
-    // If the mapping name is undefined, no mapping is specified. In that case never show the activation modal.
-    // In contrast, if the mapping name is null, this indicates that all mappings should be specifically disabled.
-    if (mappingName === undefined || layerName == null || mappingName === enabledMappingName) {
-      // @ts-expect-error ts-migrate(2322) FIXME: Type 'Omit<MappingActivationConfirmationProps<P>, ... Remove this comment to see the full error message
-      return <WrappedComponent {...rest} onClick={originalOnClick} />;
-    }
+  const actionStr = editableMapping == null ? "will" : "cannot";
+  const mappingString =
+    mappingName != null
+      ? `for the mapping "${mappingName}" which is not active. The mapping ${actionStr} be activated`
+      : `without a mapping but a mapping is active. The mapping ${actionStr} be deactivated`;
+  const recommendationStr =
+    editableMapping == null
+      ? ""
+      : "This is because the current mapping was locked while editing it with the proofreading tool. Consider changing the active mapping instead.";
 
-    const actionStr = editableMapping == null ? "will" : "cannot";
-    const mappingString =
-      mappingName != null
-        ? `for the mapping "${mappingName}" which is not active. The mapping ${actionStr} be activated`
-        : `without a mapping but a mapping is active. The mapping ${actionStr} be deactivated`;
-    const recommendationStr =
-      editableMapping == null
-        ? ""
-        : "This is because the current mapping was locked while editing it with the proofreading tool. Consider changing the active mapping instead.";
+  const confirmMappingActivation: MenuClickEventHandler = (menuClickEvent) => {
+    confirm({
+      title: `The currently active ${descriptor} was computed ${mappingString} when clicking OK. ${recommendationStr}`,
+      async onOk() {
+        if (editableMapping != null) {
+          return;
+        }
+        if (mappingName != null) {
+          Store.dispatch(setMappingAction(layerName, mappingName, "HDF5"));
+          await waitForCondition(
+            () =>
+              getMappingInfo(
+                Store.getState().temporaryConfiguration.activeMappingByLayer,
+                layerName,
+              ).mappingStatus === MappingStatusEnum.ENABLED,
+            100,
+          );
+        } else {
+          Store.dispatch(setMappingEnabledAction(layerName, false));
+          await waitForCondition(
+            () =>
+              getMappingInfo(
+                Store.getState().temporaryConfiguration.activeMappingByLayer,
+                layerName,
+              ).mappingStatus === MappingStatusEnum.DISABLED,
+            100,
+          );
+        }
 
-    const confirmMappingActivation = () => {
-      confirm({
-        title: `The currently active ${descriptor} was computed ${mappingString} when clicking OK. ${recommendationStr}`,
-        async onOk() {
-          if (editableMapping != null) {
-            return;
-          }
-          if (mappingName != null) {
-            Store.dispatch(setMappingAction(layerName, mappingName, "HDF5"));
-            await waitForCondition(
-              () =>
-                getMappingInfo(
-                  Store.getState().temporaryConfiguration.activeMappingByLayer,
-                  layerName,
-                ).mappingStatus === MappingStatusEnum.ENABLED,
-              100,
-            );
-          } else {
-            Store.dispatch(setMappingEnabledAction(layerName, false));
-            await waitForCondition(
-              () =>
-                getMappingInfo(
-                  Store.getState().temporaryConfiguration.activeMappingByLayer,
-                  layerName,
-                ).mappingStatus === MappingStatusEnum.DISABLED,
-              100,
-            );
-          }
-
-          originalOnClick();
-        },
-      });
-    };
-
-    /* @ts-expect-error ts-migrate(2322) FIXME: Type 'Omit<MappingActivationConfirmationProps<P>, ... Remove this comment to see the full error message */
-    return <WrappedComponent {...rest} onClick={confirmMappingActivation} />;
+        originalOnClick(menuClickEvent);
+      },
+    });
   };
+
+  return confirmMappingActivation;
 }
diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/skeleton_tab_view.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/skeleton_tab_view.tsx
index 8bb27b0d92e..1bd8b77c82f 100644
--- a/frontend/javascripts/oxalis/view/right-border-tabs/skeleton_tab_view.tsx
+++ b/frontend/javascripts/oxalis/view/right-border-tabs/skeleton_tab_view.tsx
@@ -4,11 +4,11 @@ import {
   Dropdown,
   Empty,
   Input,
-  Menu,
   Spin,
   Modal,
   Tooltip,
   notification,
+  MenuProps,
 } from "antd";
 import type { Dispatch } from "redux";
 import {
@@ -687,54 +687,57 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
     }
   }
 
-  getSettingsDropdown() {
+  getSettingsDropdown(): MenuProps {
     const activeMenuKey = this.props.userConfiguration.sortTreesByName
       ? "sortByName"
       : "sortByTime";
-    return (
-      <Menu selectedKeys={[activeMenuKey]} onClick={this.handleDropdownClick}>
-        <Menu.Item key="sortByName">by name</Menu.Item>
-        <Menu.Item key="sortByTime">by creation time</Menu.Item>
-      </Menu>
-    );
+    return {
+      selectedKeys: [activeMenuKey],
+      onClick: this.handleDropdownClick,
+      items: [
+        { key: "sortByName", label: "by name" },
+        { key: "sortByTime", label: "by creation time" },
+      ],
+    };
   }
 
-  getActionsDropdown() {
+  getActionsDropdown(): MenuProps {
     const isEditingDisabled = !this.props.allowUpdate;
-    return (
-      <Menu>
-        <Menu.Item
-          key="shuffleAllTreeColors"
-          onClick={this.shuffleAllTreeColors}
-          title="Shuffle All Tree Colors"
-          disabled={isEditingDisabled}
-        >
-          <i className="fas fa-random" /> Shuffle All Tree Colors
-        </Menu.Item>
-        <Menu.Item
-          key="handleNmlDownload"
-          onClick={this.handleNmlDownload}
-          title="Download selected trees as NML"
-        >
-          <DownloadOutlined /> Download Selected Trees
-        </Menu.Item>
-        <Menu.Item
-          key="importNml"
-          onClick={this.props.showDropzoneModal}
-          title="Import NML files"
-          disabled={isEditingDisabled}
-        >
-          <UploadOutlined /> Import NML
-        </Menu.Item>
-        <Menu.Item
-          key="measureAllSkeletons"
-          onClick={this.handleMeasureAllSkeletonsLength}
-          title="Measure Length of All Skeletons"
-        >
-          <i className="fas fa-ruler" /> Measure Length of All Skeletons
-        </Menu.Item>
-      </Menu>
-    );
+    return {
+      items: [
+        {
+          key: "shuffleAllTreeColors",
+          onClick: this.shuffleAllTreeColors,
+          title: "Shuffle All Tree Colors",
+          disabled: isEditingDisabled,
+          icon: <i className="fas fa-random" />,
+          label: "Shuffle All Tree Colors",
+        },
+        {
+          key: "handleNmlDownload",
+          onClick: this.handleNmlDownload,
+          title: "Download selected trees as NML",
+          icon: <DownloadOutlined />,
+          label: "Download Selected Trees",
+        },
+        {
+          key: "importNml",
+          onClick: this.props.showDropzoneModal,
+          title: "Import NML files",
+          disabled: isEditingDisabled,
+          icon: <UploadOutlined />,
+          label: "Import NML",
+        },
+        {
+          key: "measureAllSkeletons",
+          onClick: this.handleMeasureAllSkeletonsLength,
+          title: "Measure Length of All Skeletons",
+
+          icon: <i className="fas fa-ruler" />,
+          label: "Measure Length of All Skeletons",
+        },
+      ],
+    };
   }
 
   getSelectedTreesAlert = () =>
@@ -857,7 +860,7 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
                   >
                     <i className="fas fa-toggle-off" />
                   </ButtonComponent>
-                  <Dropdown overlay={this.getActionsDropdown()} trigger={["click"]}>
+                  <Dropdown menu={this.getActionsDropdown()} trigger={["click"]}>
                     <ButtonComponent>
                       More
                       <DownOutlined />
@@ -888,7 +891,7 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
                   >
                     <i className="fas fa-arrow-right" />
                   </ButtonComponent>
-                  <Dropdown overlay={this.getSettingsDropdown()} trigger={["click"]}>
+                  <Dropdown menu={this.getSettingsDropdown()} trigger={["click"]}>
                     <ButtonComponent title="Sort">
                       <i className="fas fa-sort-alpha-down" />
                     </ButtonComponent>
diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/tree_hierarchy_view.tsx b/frontend/javascripts/oxalis/view/right-border-tabs/tree_hierarchy_view.tsx
index ab8e324065c..591a7110b8d 100644
--- a/frontend/javascripts/oxalis/view/right-border-tabs/tree_hierarchy_view.tsx
+++ b/frontend/javascripts/oxalis/view/right-border-tabs/tree_hierarchy_view.tsx
@@ -1,5 +1,5 @@
 import { AutoSizer } from "react-virtualized";
-import { Checkbox, Dropdown, Menu, Modal, notification } from "antd";
+import { Checkbox, Dropdown, MenuProps, Modal, notification } from "antd";
 import { DeleteOutlined, PlusOutlined, ShrinkOutlined } from "@ant-design/icons";
 import { connect } from "react-redux";
 import { batchActions } from "redux-batched-actions";
@@ -388,92 +388,84 @@ class TreeHierarchyView extends React.PureComponent<Props, State> {
     );
     const isEditingDisabled = !this.props.allowUpdate;
     const hasSubgroup = anySatisfyDeep(node.children, (child) => child.type === TYPE_GROUP);
-    const createMenu = () => (
-      <Menu>
-        <Menu.Item
-          key="create"
-          data-group-id={id}
-          onClick={() => this.createGroup(id)}
-          disabled={isEditingDisabled}
-        >
-          <PlusOutlined />
-          Create new group
-        </Menu.Item>
-        <Menu.Item
-          key="delete"
-          data-group-id={id}
-          disabled={isEditingDisabled}
-          onClick={() => this.deleteGroup(id)}
-        >
-          <DeleteOutlined />
-          Delete group
-        </Menu.Item>
-        {hasSubgroup ? (
-          <Menu.Item
-            key="collapseSubgroups"
-            data-group-id={id}
-            disabled={!hasExpandedSubgroup}
-            onClick={() => this.setExpansionOfAllSubgroupsTo(id, false)}
-          >
-            <ShrinkOutlined />
-            Collapse all subgroups
-          </Menu.Item>
-        ) : null}
-        {hasSubgroup ? (
-          <Menu.Item
-            key="expandSubgroups"
-            data-group-id={id}
-            disabled={!hasCollapsedSubgroup}
-            onClick={() => this.setExpansionOfAllSubgroupsTo(id, true)}
-          >
-            <ShrinkOutlined />
-            Expand all subgroups
-          </Menu.Item>
-        ) : null}
-        <Menu.Item
-          key="hideTree"
-          onClick={() => {
+    const createMenu: MenuProps = {
+      items: [
+        {
+          key: "create",
+          onClick: () => this.createGroup(id),
+          disabled: isEditingDisabled,
+          icon: <PlusOutlined />,
+          label: "Create new group",
+        },
+        {
+          key: "delete",
+          disabled: isEditingDisabled,
+          onClick: () => this.deleteGroup(id),
+          icon: <DeleteOutlined />,
+          label: "Delete group",
+        },
+        hasSubgroup
+          ? {
+              key: "collapseSubgroups",
+              disabled: !hasExpandedSubgroup,
+              onClick: () => this.setExpansionOfAllSubgroupsTo(id, false),
+              icon: <ShrinkOutlined />,
+              label: "Collapse all subgroups",
+            }
+          : null,
+        hasSubgroup
+          ? {
+              key: "expandSubgroups",
+              disabled: !hasCollapsedSubgroup,
+              onClick: () => this.setExpansionOfAllSubgroupsTo(id, true),
+              icon: <ShrinkOutlined />,
+              label: "Expand all subgroups",
+            }
+          : null,
+        {
+          key: "hideTree",
+          onClick: () => {
             this.props.onSetActiveGroup(id);
             this.props.onToggleHideInactiveTrees();
-          }}
-          title="Hide/Show all other trees"
-        >
-          <i className="fas fa-eye" /> Hide/Show all other trees
-        </Menu.Item>
-        <Menu.Item
-          key="shuffleTreeGroupColors"
-          onClick={() => {
+          },
+          icon: <i className="fas fa-eye" />,
+          label: "Hide/Show all other trees",
+        },
+        {
+          key: "shuffleTreeGroupColors",
+          onClick: () => {
             if (id === MISSING_GROUP_ID) this.props.onShuffleAllTreeColors();
             else this.shuffleTreeGroupColors(id);
-          }}
-          title="Shuffle Tree Colors"
-        >
-          <i className="fas fa-adjust" /> Shuffle Tree Group Colors
-        </Menu.Item>
-        <Menu.Item key="setTreeGroupColor" disabled={isEditingDisabled}>
-          <ChangeColorMenuItemContent
-            title="Change Tree Group Color"
-            isDisabled={isEditingDisabled}
-            onSetColor={(color) => {
-              if (id === MISSING_GROUP_ID) this.setAllTreesColor(color);
-              else this.setTreeGroupColor(id, color);
-            }}
-            rgb={[0.5, 0.5, 0.5]}
-          />
-        </Menu.Item>
-      </Menu>
-    );
+          },
+          icon: <i className="fas fa-adjust" />,
+          label: "Shuffle Tree Group Colors",
+        },
+        {
+          key: "setTreeGroupColor",
+          disabled: isEditingDisabled,
+          label: (
+            <ChangeColorMenuItemContent
+              title="Change Tree Group Color"
+              isDisabled={isEditingDisabled}
+              onSetColor={(color) => {
+                if (id === MISSING_GROUP_ID) this.setAllTreesColor(color);
+                else this.setTreeGroupColor(id, color);
+              }}
+              rgb={[0.5, 0.5, 0.5]}
+            />
+          ),
+        },
+      ],
+    };
 
     // Make sure the displayed name is not empty
     const displayableName = name.trim() || "<no name>";
     return (
       <div>
         <Dropdown
-          overlay={createMenu}
-          placement="bottom" // The overlay is generated lazily. By default, this would make the overlay
-          // re-render on each parent's render() after it was shown for the first time.
-          // The reason for this is that it's not destroyed after closing.
-          // Therefore, autoDestroy is passed.
+          menu={createMenu}
+          placement="bottom"
+          // AutoDestroy is used to remove the menu from DOM and keep up the performance.
           // destroyPopupOnHide should also be an option according to the docs, but
           // does not work properly. See https://github.com/react-component/trigger/issues/106#issuecomment-948532990
           // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; overlay: () => Element;... Remove this comment to see the full error message
@@ -526,62 +518,66 @@ class TreeHierarchyView extends React.PureComponent<Props, State> {
       // Defining background color of current node
       const styleClass = this.getNodeStyleClassForBackground(node.id);
 
-      const createMenu = () => (
-        <Menu>
-          <Menu.Item key="changeTreeColor" disabled={isEditingDisabled}>
-            <ChangeColorMenuItemContent
-              title="Change Tree Color"
-              isDisabled={isEditingDisabled}
-              onSetColor={(color) => {
-                this.props.onSetTreeColor(tree.treeId, color);
-              }}
-              rgb={tree.color}
-            />
-          </Menu.Item>
-          <Menu.Item
-            key="shuffleTreeColor"
-            onClick={() => this.props.onShuffleTreeColor(tree.treeId)}
-            title="Shuffle Tree Color"
-            disabled={isEditingDisabled}
-          >
-            <i className="fas fa-adjust" /> Shuffle Tree Color
-          </Menu.Item>
-          <Menu.Item
-            key="deleteTree"
-            onClick={() => this.props.onDeleteTree(tree.treeId)}
-            title="Delete Tree"
-            disabled={isEditingDisabled}
-          >
-            <i className="fas fa-trash" /> Delete Tree
-          </Menu.Item>
-          <Menu.Item
-            key="measureSkeleton"
-            onClick={() => this.handleMeasureSkeletonLength(tree.treeId, tree.name)}
-            title="Measure Skeleton Length"
-          >
-            <i className="fas fa-ruler" /> Measure Skeleton Length
-          </Menu.Item>
-          <Menu.Item
-            key="hideTree"
-            onClick={() => {
-              this.props.onSetActiveTree(tree.treeId);
-              this.props.onToggleHideInactiveTrees();
-              this.handleTreeDropdownMenuVisibility(tree.treeId, false);
-            }}
-            title="Hide/Show all other trees"
-          >
-            <i className="fas fa-eye" /> Hide/Show all other trees
-          </Menu.Item>
-        </Menu>
-      );
+      const createMenu = (): MenuProps => {
+        return {
+          items: [
+            {
+              key: "changeTreeColor",
+              disabled: isEditingDisabled,
+              label: (
+                <ChangeColorMenuItemContent
+                  title="Change Tree Color"
+                  isDisabled={isEditingDisabled}
+                  onSetColor={(color) => {
+                    this.props.onSetTreeColor(tree.treeId, color);
+                  }}
+                  rgb={tree.color}
+                />
+              ),
+            },
+            {
+              key: "shuffleTreeColor",
+              onClick: () => this.props.onShuffleTreeColor(tree.treeId),
+              title: "Shuffle Tree Color",
+              disabled: isEditingDisabled,
+              icon: <i className="fas fa-adjust" />,
+              label: "Shuffle Tree Color",
+            },
+            {
+              key: "deleteTree",
+              onClick: () => this.props.onDeleteTree(tree.treeId),
+              title: "Delete Tree",
+              disabled: isEditingDisabled,
+              icon: <i className="fas fa-trash" />,
+              label: "Delete Tree",
+            },
+            {
+              key: "measureSkeleton",
+              onClick: () => this.handleMeasureSkeletonLength(tree.treeId, tree.name),
+              title: "Measure Skeleton Length",
+              icon: <i className="fas fa-ruler" />,
+              label: "Measure Skeleton Length",
+            },
+            {
+              key: "hideTree",
+              onClick: () => {
+                this.props.onSetActiveTree(tree.treeId);
+                this.props.onToggleHideInactiveTrees();
+                this.handleTreeDropdownMenuVisibility(tree.treeId, false);
+              },
+              title: "Hide/Show all other trees",
+              icon: <i className="fas fa-eye" />,
+              label: "Hide/Show all other trees",
+            },
+          ],
+        };
+      };
 
       nodeProps.title = (
         <div className={styleClass}>
           <Dropdown
-            overlay={createMenu} // The overlay is generated lazily. By default, this would make the overlay
-            // re-render on each parent's render() after it was shown for the first time.
-            // The reason for this is that it's not destroyed after closing.
-            // Therefore, autoDestroy is passed.
+            menu={createMenu()} //
+            // AutoDestroy is used to remove the menu from DOM and keep up the performance.
             // destroyPopupOnHide should also be an option according to the docs, but
             // does not work properly. See https://github.com/react-component/trigger/issues/106#issuecomment-948532990
             // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; overlay: () => Element;... Remove this comment to see the full error message
diff --git a/frontend/javascripts/oxalis/view/td_view_controls.tsx b/frontend/javascripts/oxalis/view/td_view_controls.tsx
index 7fa5a8f55dd..b40c1ed4c8d 100644
--- a/frontend/javascripts/oxalis/view/td_view_controls.tsx
+++ b/frontend/javascripts/oxalis/view/td_view_controls.tsx
@@ -1,4 +1,14 @@
-import { Button, Radio, Tooltip, Menu, Dropdown, Col, Row, Switch, RadioChangeEvent } from "antd";
+import {
+  Button,
+  Radio,
+  Tooltip,
+  Dropdown,
+  Col,
+  Row,
+  Switch,
+  RadioChangeEvent,
+  MenuProps,
+} from "antd";
 import {
   StopOutlined,
   BorderInnerOutlined,
@@ -31,71 +41,80 @@ function TDViewControls({
   onChangeTdViewDisplayDatasetBorders,
   onChangeTdViewDisplayLayerBorders,
 }: Props) {
-  const settingsMenu = (
-    <Menu
-      style={{
-        width: 260,
-      }}
-    >
-      <Menu.Item key="tdViewDisplayPlanes">
-        <Row>
-          <Col span={14}>
-            <label className="setting-label">Plane Display Mode</label>
-          </Col>
-          <Col span={10}>
-            <Radio.Group
-              value={tdViewDisplayPlanes}
-              onChange={onChangeTdViewDisplayPlanes}
-              size="small"
-              className="without-icon-margin"
-            >
-              <Tooltip title="Hide Planes">
-                <Radio.Button value={TDViewDisplayModeEnum.NONE}>
-                  <StopOutlined />
-                </Radio.Button>
-              </Tooltip>
-              <Tooltip title="Show Wireframes Only">
-                <Radio.Button value={TDViewDisplayModeEnum.WIREFRAME}>
-                  <BorderInnerOutlined />
-                </Radio.Button>
-              </Tooltip>
-              <Tooltip title="Show Planes with Data">
-                <Radio.Button value={TDViewDisplayModeEnum.DATA}>
-                  <BorderOuterOutlined />
-                </Radio.Button>
-              </Tooltip>
-            </Radio.Group>
-          </Col>
-        </Row>
-      </Menu.Item>
-      <Menu.Item key="showDatasetBorder">
-        <Row>
-          <Col span={14}>
-            <label className="setting-label">Show Dataset Border</label>
-          </Col>
-          <Col span={10}>
-            <Switch
-              checked={tdViewDisplayDatasetBorders}
-              onChange={onChangeTdViewDisplayDatasetBorders}
-            />
-          </Col>
-        </Row>
-      </Menu.Item>
-      <Menu.Item key="showLayerBorders">
-        <Row>
-          <Col span={14}>
-            <label className="setting-label">Show Layer Borders</label>
-          </Col>
-          <Col span={10}>
-            <Switch
-              checked={tdViewDisplayLayerBorders}
-              onChange={onChangeTdViewDisplayLayerBorders}
-            />
-          </Col>
-        </Row>
-      </Menu.Item>
-    </Menu>
-  );
+  const settingsMenu: MenuProps = {
+    style: {
+      width: 260,
+    },
+    items: [
+      {
+        key: "tdViewDisplayPlanes",
+        label: (
+          <Row>
+            <Col span={14}>
+              <label className="setting-label">Plane Display Mode</label>
+            </Col>
+            <Col span={10}>
+              <Radio.Group
+                value={tdViewDisplayPlanes}
+                onChange={onChangeTdViewDisplayPlanes}
+                size="small"
+                className="without-icon-margin"
+              >
+                <Tooltip title="Hide Planes">
+                  <Radio.Button value={TDViewDisplayModeEnum.NONE}>
+                    <StopOutlined />
+                  </Radio.Button>
+                </Tooltip>
+                <Tooltip title="Show Wireframes Only">
+                  <Radio.Button value={TDViewDisplayModeEnum.WIREFRAME}>
+                    <BorderInnerOutlined />
+                  </Radio.Button>
+                </Tooltip>
+                <Tooltip title="Show Planes with Data">
+                  <Radio.Button value={TDViewDisplayModeEnum.DATA}>
+                    <BorderOuterOutlined />
+                  </Radio.Button>
+                </Tooltip>
+              </Radio.Group>
+            </Col>
+          </Row>
+        ),
+      },
+      {
+        key: "showDatasetBorder",
+        label: (
+          <Row>
+            <Col span={14}>
+              <label className="setting-label">Show Dataset Border</label>
+            </Col>
+            <Col span={10}>
+              <Switch
+                checked={tdViewDisplayDatasetBorders}
+                onChange={onChangeTdViewDisplayDatasetBorders}
+              />
+            </Col>
+          </Row>
+        ),
+      },
+      {
+        key: "showLayerBorders",
+        label: (
+          <Row>
+            <Col span={14}>
+              <label className="setting-label">Show Layer Borders</label>
+            </Col>
+            <Col span={10}>
+              <Switch
+                checked={tdViewDisplayLayerBorders}
+                onChange={onChangeTdViewDisplayLayerBorders}
+              />
+            </Col>
+          </Row>
+        ),
+      },
+    ],
+  };
+
   return (
     <div id="TDViewControls" className="antd-legacy-group">
       <Button size="small" onClick={() => api.tracing.rotate3DViewToDiagonal()}>
@@ -113,7 +132,7 @@ function TDViewControls({
         <span className="colored-dot" />
         XZ
       </Button>
-      <Dropdown overlay={settingsMenu} placement="bottomRight" trigger={["click"]}>
+      <Dropdown menu={settingsMenu} placement="bottomRight" trigger={["click"]}>
         <Button size="small">
           <SettingOutlined />
         </Button>