Drag and drop using react-dnd or react-beautiful-dnd

Question

In React I am trying to create multiple tiles in my dashboard. Here is the sample frame.

In the above picture, there are 5 rows and each rows have different columns. I was trying to implement the rearrangements of these tiles in both X and Y directions. All these rows can be arranged in Y directions. Each row can be arranged in X direction.

To implement this I started using react-dnd and here is my code to do that.

import React from "react";
import { useDrag, useDrop, DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

const DraggableItem = ({ children }) => {
  const [{ isDragging }, dragRef] = useDrag(() => ({
    type: "item",
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <div ref={dragRef} style={{ opacity: isDragging ? 0.5 : 1 }}>
      {children}
    </div>
  );
};

const DroppableArea = () => {
  const [, dropRef] = useDrop(() => ({
    accept: "item",
    drop: (item, monitor) => {
      // handle drop event
      console.log("Item dropped:", item);
    },
  }));

  return <div ref={dropRef}>Droppable Area</div>;
};

export const ChartDashboard = () => (
  <DndProvider backend={HTML5Backend}>
    <main className="w-full p-4 pt-20 overflow-scroll h-screen">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
        <DraggableItem>
          <div className="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64">
            1
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64">
            2
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64">
            3
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64">
            4
          </div>
        </DraggableItem>
      </div>
      <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4">
        5
      </div>
      <div className="grid grid-cols-2 gap-4 mb-4">
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            6
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            7
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            8
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            9
          </div>
        </DraggableItem>
      </div>
      <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4">
        10
      </div>
      <div className="grid grid-cols-2 gap-4">
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            11
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            12
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            13
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            14
          </div>
        </DraggableItem>
      </div>
      <DroppableArea />
    </main>
  </DndProvider>
);

I need help in acvieving this feature. I am not sure which library is best to implement this feature. Can anyone help me with this? There are other librarys this supports drag and drop. for example: react-beautiful-dnd, react-sortable-hoc etc.

Any library will work.