Ant Design (antd) re-orderable menu using react-beautiful-dnd

reorderable-menu.jsx

import {
  DragDropContext,
  Draggable,
  Droppable,
} from "react-beautiful-dnd";
import React, { useCallback, useMemo } from "react";
import { Menu } from "antd";

const renderMenuFn =
  (item, props) =>
    props.draggable ? (
      <Draggable key={props.id} draggableId={props.id} index={props.index}>
        {(provided) => (
          <div
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
          >
            {item}
          </div>
        )}
      </Draggable>
    ) : (
      item
    );
    
const ReorderableMenu = () => {
  const menuItems = useMemo(() => [
    {
      id: "id1",
      index: 0,
      draggable: true,
    },
    {
      id: "id2",
      index: 1,
      draggable: false, // disabled
    },
    {
      id: "id3",
      index: 2,
      draggable: true,
    },
  ], [])

  const handleDragEnd = useCallback((result) => {
    // ...
  }, [])

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="reorderable-menu">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            <Menu
              items={menuItems}

              // override internal render fns
              _internalRenderMenuItem={renderMenuFn}
              _internalRenderSubMenuItem={renderMenuFn}
            />
          </div>
        )}
      </Droppable>
    )
  }
  </DragDropContext>
}