Как подключить виртуальные списки в react и react-beautiful-dnd?

Question

[Марат Иванов]

Всем привет! Есть кусок кода который выводит дропы списком

<div className={styles['rest']}>{cass.id}({cass.name})</div>

их можно перетаскивать в другой блок.

import React from 'react';
import { Droppable, Draggable } from 'react-beautiful-dnd';
import { FixedSizeList as List } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'

<Droppable key={123} droppableId="cass" >
        {(provided, snapshot) => (
          <div
            style={{height: '100%'}}
            ref={provided.innerRef}
            {...provided.droppableProps}
          >
            {serverList ? (
              <div className={styles['cass']}>
                {(strSearch ? serverList.filter(item => String(item.name).toLocaleLowerCase().includes(strSearch.toLocaleLowerCase()) || String(item.id).includes(strSearch)) : serverList)?.map((cass, index) => (
                  <Draggable
                    key={cass.id}
                    draggableId={String(cass.id)}
                    index={index}
                  >
                    {(provided, snapshot) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                      >
                        <div className={styles['rest']}>
                          {cass.id}({cass.name})
                        </div>
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            ) : (
              <div>Выберите данные</div>
            )}
          </div>
        )}
      </Droppable>

как сюда подключить виртуализацию? Список из чуть больше 5000(!) блоков. Спасибо всем!