React js { DragDropContext, Droppable, Draggable } getting error

Question

Invariant failed: Cannot find droppable entry with id [droppable-list]

<DragDropContext onDragEnd={handleDragEnd}>
  <List sx={{ overflowY: "auto", maxHeight: "20vh" }}>
    <Droppable droppableId="droppable-list">
      {(provided) => (
        <div ref={provided.innerRef} {...provided.droppableProps}>
          {dataEXEditar?.map((element, index) => (
            <Draggable key={index} draggableId={`draggable-item-${index}`} index={index}>
              {(provided) => (
                <div
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  
                >
                  <ListItem>
                    <ListItemText primary={element.nome} />
                    <ListItemText primary={element.reps} />
                    <ListItemSecondaryAction>
                      <IconButton
                        edge="end"
                        sx={{ color: colors.redAccent[500] }}
                        onClick={() => handleExerciseDelete(element, index)}
                      >
                        <DeleteIcon />
                      </IconButton>
                    </ListItemSecondaryAction>
                  </ListItem>
                </div>
              )}
            </Draggable>
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  </List>
</DragDropContext>

For some reason if i refresh the page and close the error painel sometime it starts working.