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

如何解决我想使用beautiful-dnd交换2x2矩阵元素，但是当我将它们映射时，它使2列

我想使用dnd或beautiful 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>