i want to swap 2x2 matrix elements using beautiful-dnd ,but when i map them them it makes 2 colum

Question

I want to swap two arrays item using dnd or beautiful dnd I need help with it

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

here's my code when I map it creates tow columns and in each column, it shows 2 elements, there are tow arrays so it creates 2 columns for each array I can't find the specific material for swapping items its always place an item from one column to other not swap them

I want 1 column and each element can swap with each other

looking forward

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