Cards overlapping when I drag react-beautiful-dnd

Question

I have create simple task management system with react, react-beautiful-dnd and material ui. But when I want to drag my task card, before and after my selected element just overlapping each other.

           <DragDropContext
              onDragEnd={(result) =>
                onDragEnd(
                  result,
                  cloneList,
                  setCloneList,
                  handleDragBoardData,
                  handleMoveList
                )
              }
            >
              <Droppable
                droppableId="board"
                type="COLUMN"
                direction="horizontal"
                mode="virtual"
                ignoreContainerClipping={true}
                isCombineEnabled={true}
              >
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                    style={{
                      display: "inline-flex",
                      overflow: "scroll",
                      gap: 10,
                      maxWidth: "100%",
                    }}
                  >
                    {cloneList.map((column, index) => (
                      <Draggable
                        key={column._id}
                        draggableId={column._id}
                        index={index}
                      >
                        {(provided, snapshot) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                          >
                            <Lane
                              key={column._id}
                              column={column}
                              handleAddList={handleCreateListCard}
                              handleEditList={handleEditList}
                              handleDeleteList={handleDeleteList}
                            >
                              <Droppable
                                direction="vertical"
                                droppableId={column._id}
                                key={column._id}
                                mode="virtual"
                                renderClone={(provided, snapshot, rubric) => (
                                  <div
                                    ref={provided.innerRef}
                                    {...provided.draggableProps}
                                    {...provided.dragHandleProps}
                                  >
                                    <Task
                                      item={column.cards[rubric.source.index]}
                                      setTaskDetails={setTaskDetails}
                                      setOpenEditTask={setOpenEditTask}
                                    />
                                  </div>
                                )}
                              >
                                {(provided) => {
                                  return (
                                    <div
                                      {...provided.droppableProps}
                                      ref={provided.innerRef}
                                      style={{
                                        minHeight: 50,
                                      }}
                                    >
                                      {column.cards.map((item, index) => {
                                        return (
                                          <Draggable
                                            key={item.id}
                                            draggableId={item.id}
                                            index={index}
                                          >
                                            {(provided) => {
                                              return (
                                                <div
                                                  ref={provided.innerRef}
                                                  {...provided.draggableProps}
                                                  {...provided.dragHandleProps}
                                                  // style={{}}
                                                >
                                                  <Task
                                                    item={item}
                                                    setTaskDetails={
                                                      setTaskDetails
                                                    }
                                                    setOpenEditTask={
                                                      setOpenEditTask
                                                    }
                                                  />
                                                  {provided.placeholder}
                                                </div>
                                              );
                                            }}
                                          </Draggable>
                                        );
                                      })}
                                    </div>
                                  );
                                }}
                              </Droppable>
                              {provided.placeholder}
                            </Lane>
                          </div>
                        )}
                      </Draggable>
                    ))}
                    {provided.placeholder}
                  </div>
                )}
              </Droppable>
            </DragDropContext>

Problem here -> https://i.imgur.com/PEFIRRx.mp4

Main problem is cards are overlapping, also when I want to drag lists they also overlapping also. How can I fix this problem ?