我正在尝试使用Next JS 12.3.1制作一个Web应用程序，其中包含使用react-beautiful-dnd版本13.1.1的可拖动组件。

import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

export default function BigOlList() {

const defaultList = ["A", "B", "C", "D", "E"];
// React state to track order of items
const [itemList, setItemList] = useState(defaultList);

// Function to update list on drop
const handleDrop = (droppedItem) => {
  // Ignore drop outside droppable container
  if (!droppedItem.destination) return;
  var updatedList = [...itemList];
  // Remove dragged item
  const [reorderedItem] = updatedList.splice(droppedItem.source.index, 1);
  // Add dropped item
  updatedList.splice(droppedItem.destination.index, 0, reorderedItem);
  // Update State
  setItemList(updatedList);
};

return (
  <div className="App">
    <DragDropContext onDragEnd={handleDrop}>
        <Droppable droppableId="list-container">
            {(provided) => (
                <div className="list-container" {...provided.droppableProps} ref={provided.innerRef}>
                    {itemList.map((item, index) => (
                        <Draggable key={item} draggableId={item} index={index}>
                            {(provided) => (
                                <div className="item-container"
                                {...provided.dragHandleProps}
                                {...provided.draggableProps}
                                ref={provided.innerRef}
                                >
                                    {item}
                                </div>
                            )}
                        </Draggable>
                    ))}
                    {provided.placeholder}
                </div>
            )}
        </Droppable>
        </DragDropContext>
  </div>
);
}

我试着跟随example，但是没有一个项目是可拖动的。当我悬停在框上时，可抓取的光标甚至不显示。它只是一个普通的指针。我听说resetServerContext需要在_document.js中调用，所以我这样做了，但是没有什么不同。应用程序仍然编译，没有任何问题，错误，或者其他任何东西坏了的指示器。有人对这个库有更多的经验，或者知道另一个更受支持的库吗？