title: i want to swap 2x2 matrix elements using beautiful-dnd ,but when i map them them it makes 2 colum
body: <p>I want to swap two arrays item using dnd or beautiful dnd I need help with it</p>
  <pre><code>const [state, setState] = useState([
    [&quot;1&quot;, &quot;2&quot;],
    [&quot;3&quot;, &quot;4&quot;], 
  ]);
  </code></pre>
  <p>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</p>
  <p>I want 1 column  and each element can swap with each other</p>
  <p>looking forward</p>
  <pre><code> &lt;div className=&quot;flex justify-center pt-16&quot; &gt;
      &lt;DragDropContext onDragEnd={onDragEnd}&gt;
        {state.map((el, ind) =&gt; (
          &lt;Droppable key={ind} droppableId={`${ind}`}&gt;
            {(provided, snapshot) =&gt; (
              &lt;div
                ref={provided.innerRef}
                style={getListStyle(snapshot.isDraggingOver)}
                {...provided.droppableProps}
              &gt;
                {el.map((item, index) =&gt; (
                  &lt;Draggable
                    key={item}
                    draggableId={item}
                    index={index}
                  &gt;
                    {(provided, snapshot) =&gt; (
                      &lt;div                      
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(
                          snapshot.isDragging,
                          provided.draggableProps.style
                        )}
                      &gt;
                 &lt;div className=&quot;text-center text-3xl font-bold text-white&quot;
                        &gt;
                          {item}
                        &lt;/div&gt;
                      &lt;/div&gt;
                    )}
                  &lt;/Draggable&gt;
                ))}
                {provided.placeholder}
              &lt;/div&gt;
            )}
          &lt;/Droppable&gt;
        ))}
      &lt;/DragDropContext&gt;
    &lt;/div&gt;
  </code></pre>