Draggable

import React, { useState } from 'react';
import { Container } from 'react-bootstrap';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { columnsFromBackend } from './DataList';

function ReactBeautifulDnd() {
  const [columns, setColumns] = useState(columnsFromBackend);
  const onDragEnd = (result, columns, setColumns) => {
    if (!result.destination) return;
    const { source, destination } = result;
    if (source.droppableId !== destination.droppableId) {
      const sourceColumn = columns[source.droppableId];
      const destColumn = columns[destination.droppableId];
      const sourceItems = [...sourceColumn.items];
      const destItems = [...destColumn.items];
      const [removed] = sourceItems.splice(source.index, 1);
      destItems.splice(destination.index, 0, removed);
      setColumns({
        ...columns,
        [source.droppableId]: {
          ...sourceColumn,
          items: sourceItems,
        },
        [destination.droppableId]: {
          ...destColumn,
          items: destItems,
        },
      });
    } else {
      const column = columns[source.droppableId];
      const copiedItems = [...column.items];
      const [removed] = copiedItems.splice(source.index, 1);
      copiedItems.splice(destination.index, 0, removed);
      setColumns({
        ...columns,
        [source.droppableId]: {
          ...column,
          items: copiedItems,
        },
      });
    }
  };
  return (
     <DragDropContext
      onDragEnd={(result) => onDragEnd(result, columns, setColumns)}
    >
       <Container>
         <TaskColumnStyles>
          {Object.entries(columns).map(([columnId, column], index) => {
            return (
               <Droppable key={columnId} droppableId={columnId}>
                {(provided, snapshot) => (
                   <TaskList
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                  >
                    {column.items.map((item, index) => (
                      <Draggable key={item.id} draggableId={item.id} index={index}>
                       {(provided) => (
                             <div
                                ref={provided.innerRef}
                                {...provided.draggableProps}
                                {...provided.dragHandleProps}
                            >
                                 <TaskInformation>
                                     <p>{item.Task} </p>
                                 </TaskInformation>
                             </div>
                        )}
                     </Draggable>
                    ))}
                    {provided.placeholder}
                   </TaskList>
                )}
               </Droppable>
            );
          })}
         </TaskColumnStyles>
       </Container>
     </DragDropContext>
  );
}

export default ReactBeautifulDnd;