React-beautiful-dnd: Draggables stop working after re-render

[Marsunpaisti]

My draggables mysteriously stop working when my useEffect hooks changes the underlying lists. In console it prints error that it cannot find draggable with id X but when looking in the inspector at the react components, there is still a draggable with the ID. Im wondering if its a bug or am I doing something wrong. For some reason re-opening the page again fixes the draggables even though the state stays the same.

Heres a gif showing what I mean
https://i.imgur.com/wToNlOg.gifv

This is my draggable

export const SortableTask: React.FC<{
  task: Task;
  index: number;
}> = ({ task, index }) => {`
  return (
    <Draggable key={task.id} draggableId={`${task.id}`} index={index}>
      {(provided) => (
        <Styles>
          <TaskDiv
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
          >
            <div className="text-left aligncenter">{task.name}</div>
            <div className="text-left aligncenter">
              {renderTaskRatings(task)}
            </div>
          </TaskDiv>
        </Styles>
      )}
    </Draggable>
  );
};

My droppable

export const SortableTaskList: React.FC<{ listId: string; tasks: Task[] }> = ({
  listId,
  tasks,
}) => {
  return (
    <Droppable droppableId={listId}>
      {(provided) => (
        <ListDiv ref={provided.innerRef} {...provided.droppableProps}>
          {tasks.map((task, index) => (
            <SortableTask key={task.id} task={task} index={index} />
          ))}
          {provided.placeholder}
        </ListDiv>
      )}
    </Droppable>
  );
};

Dragdropcontext

          <DragDropContext onDragEnd={onDragEnd}>
            <SortableTaskList
                listId={ListId.RoadmapTasks}
>               tasks={taskLists[ListId.RoadmapTasks]}
            />            
            <SortableTaskList
                listId={ListId.VersionTasks}
                tasks={taskLists[ListId.VersionTasks]}
            />
          </DragDropContext>

The useEffect that gets ran and somehow breaks the draggables

  useEffect(() => {
    let roadmapTasks = [] as Task[];
    roadmapTasks = currentRoadmap!.tasks;
    setTasks(() => {
      return {
        [ListId.RoadmapTasks]: roadmapTasks.filter(
          (task) =>
            task.versionId === undefined ||
            task.versionId !== currentVersion?.id,
        ),
        [ListId.VersionTasks]: roadmapTasks.filter(
          (task) => task.versionId === currentVersion?.id,
        ),
      };
    });
  }, [currentRoadmap, currentVersion]);

[AlithAnar]

I have similar issue

indexes and keys are 100% correct. Lists data is provided by redux + reselect.

Weird is if I move item between groups - nothing breaks.

If I move ungrouped item to some group - It breaks and I can't drag this item.

EDIT

my problem was because of using renderClone in Droppable. After turning rendering clone and deleting transform: translateZ(0) it works correctly

[rehanumar]

@AlithAnar @Marsunpaisti have you found a workaround? I am also facing the same issue. For me, the dragged item remains operational but item directly below it will stop working. (All other items either below or above are working fine).

[AlithAnar]

I've removed renderClone from Droppable and it started to work. No workaround yet.

[rehanumar]

For me, it was adding the key prop with index.

[w1cker]

For me, it was adding the key prop with index.

@rehanumar That worked for me too! Did you manage to find out why this fixes the issue ?