Row and column draggable card using react beautiful dnd both rows and columns can be multiple (Reference : Clickup Swimlane)

So i want create a dnd structure like row and column drop its more like task management and below provided its basic column dnd and i need implement with row and column so initial tasks structure can be any structure,so they can drag a task and put in another set of column which will change the task due date or status like this it will be

const initialTasks = [ { id: 1, title: "Task 1", }, { id: 2, title: "Task 2", }, { id: 3, title: "Task 3", }, ]; <div className="App"> <DragDropContext onDragEnd={onDragEnd}> <Droppable droppableId="tasks"> {(provided) => ( <div ref={provided.innerRef} {...provided.droppableProps}> {tasks.map((task, index) => ( <Draggable key={task.id} draggableId={task.id.toString()} index={index} > {(provided) => ( <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} > <div>{task.title}</div> </div> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div> );<kbd>your text</kbd>