javascript - 我想使用 beautiful-dnd 交换 2x2 矩阵元素，但是当我将它们映射时，它会生成 2 个列

Question

我想使用 dnd 或漂亮的 dnd 交换两个数组项我需要帮助

const [state, setState] = useState([
  ["1", "2"],
  ["3", "4"], 
]);

这是我的代码，当我映射它时它会创建两个列，并且在每一列中，它显示 2 个元素，有两个数组，因此它为每个数组创建 2 列我找不到用于交换项目的特定材料它总是从一个中放置一个项目列到其他不交换它们

我想要 1 列，每个元素可以相互交换

期待

 <div className="flex justify-center pt-16" >
    <DragDropContext onDragEnd={onDragEnd}>
      {state.map((el, ind) => (
        <Droppable key={ind} droppableId={`${ind}`}>
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
              {...provided.droppableProps}
            >
              {el.map((item, index) => (
                <Draggable
                  key={item}
                  draggableId={item}
                  index={index}
                >
                  {(provided, snapshot) => (
                    <div                      
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style
                      )}
                    >
               <div className="text-center text-3xl font-bold text-white"
                      >
                        {item}
                      </div>
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      ))}
    </DragDropContext>
  </div>