Javascript 我想用漂亮的dnd交换2x2矩阵元素，但当我映射它们时，它会产生2列

我想交换两个阵列项目使用dnd或美丽的dnd我需要它的帮助

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

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

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

展望未来

 <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>

{state.map（（el，ind）=>(
{（已提供，快照）=>(
{el.map（（项目，索引）=>(
{（已提供，快照）=>(
{item}
)}
))}
{提供的.占位符}
)}
))}

欢迎！返回时发生了什么（？没什么..忘了它的miss placedOk，编辑掉…：）