Invariant failed: Cannot find droppable entry with id

[VolodymyrTrykoz]

Expected behavior
When dragging an item over different sections (using react-beautiful-dnd with react-virtualized), the drag should continue smoothly across droppable areas without throwing errors.

Actual behavior
As soon as react-virtualized starts updating the DOM (e.g., when scrolling sections out of view), I receive the error: "Invariant failed: Cannot find droppable entry with id {myDynamicId}".

Steps to reproduce
Use react-beautiful-dnd within a react-virtualized list.
Add multiple droppable sections with draggable elements inside.
Start dragging an element across sections while scrolling.
This is what my code looks like:
This is a code snippet

<DragDropContext onDragEnd={onDragEnd}>
      <WindowScroller>
        {({ height, scrollTop }) => (
          <AutoSizer disableHeight>
            {({ width }) => (
              <List
                autoHeight
                height={height}
                width={width}
                rowCount={state.sections.length}
                rowHeight={cache.rowHeight}
                deferredMeasurementCache={cache}
                rowRenderer={rowRenderer}
                scrollTop={scrollTop}
              />
            )}
          </AutoSizer>
        )}
      </WindowScroller>
    </DragDropContext>

where rowRenderer looks like

const rowRenderer = ({ index, key, style, parent }) => {
    const section = state.sections[index];
    return (
      <CellMeasurer
        cache={cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}
      >
        {({ measure }) => (
          <div style={style} key={key}>
            <Droppable droppableId={section.id} key={section.id}>
              {(provided) => (
                <div
                  {...provided.droppableProps}
                  ref={provided.innerRef}
                >
                  <h3>{section.name}</h3>
                  {section.elements.map((element, index) => (
                    <Draggable
                      key={element.id}
                      draggableId={element.id}
                      index={index}
                    >
                      {(provided, snapshot) => (
                        <div
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                       
                        >
                          <div>
                            <strong>{element.name}</strong> - Size:{" "}
                            {element.size}
                          </div>
                        </div>
                      )}
                    </Draggable>
                  ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          </div>
        )}
      </CellMeasurer>
    );
  };

Suggested solution?
Potential issues with react-virtualized not keeping Droppable areas in memory. Ensuring that droppable areas are retained while dragging might solve the issue.

What version of React are you using?
React version 18.0.0

What version of react-beautiful-dnd are you running?
React-beautiful-dnd version 13.1.1

What browser are you using?
Google Chrome, version 89.0

Demo
CodeSandbox Example illustrating the issue.