Загрузка строк таблицы по запросу с помощью React WayPoint

Question

Я использую гибрид таблицы UI материалов и таблицы реакций. Когда количество строк в таблице превышает ~ 200 строк, производительность не так хороша. Поэтому я пытаюсь отобразить фиксированное количество строк (предположим, 20 строк) в начале, и всякий раз, когда я прокручиваю вниз, должен срабатывать обратный вызов, который добавляет строки к существующим строкам. Я использую response-waypoint, чтобы инициировать обратный вызов, но не могу понять, как добавить строки в конец текущего списка. Вот мой компонент таблицы.

export default function TmpTable(props) {
  let data = props.rows;
  let columns = props.columns;
  const {getTableProps,getTableBodyProps,headerGroups,rows,prepareRow,} = useTable({columns,data,});
  let slicedRows= [];
  //considering only few rows
  slicedRows = rows.slice(0, 10);

  return (
    <TableContainer style={{ maxHeight: "350px" }}>
      <Table size="small" stickyHeader>
        <TableHead>
          {headerGroups.map((headerGroup) => (
            <TableRow {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <TableCell
                  key={column.id}
                  id={"columns" + column.Header}
                >
                  <span>{column.render("Header")}</span>
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableHead>
        <TableBody {...getTableBodyProps()}>
          {slicedRows.map((row, i) => {
            prepareRow(row);
            return (
              <>
              <TableRow {...row.getRowProps()} style={{ height: "35px" }}>
                {row.cells.map((cell) => {
                  return (
                    <TableCell {...cell.getCellProps()}>
                      {cell.render("Cell")}
                    </TableCell>
                  );
                })}
              </TableRow>
              <Waypoint onEnter={() => console.log('need to add a callback that adds more rows')}/>
              </>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Мне известно о окне реакции для виртуализации строк, но я уже создал сложную таблицу с расширяющимися строками, флажками для выбора строки и т. Д. c и добавить к нему виртуализацию кажется невозможным. Поэтому я думаю, что мой единственный выбор - добавить по запросу больше строк в приведенный выше пример кода таблицы. Я не могу использовать хуки для хранения slicedRows, потому что он повторно отображает весь компонент, и мне нужно прокручивать с самого начала. Так есть ли способ добавлять строки по запросу с помощью Waypoint? Если нет, может ли кто-нибудь предложить другие альтернативы для добавления строк в DOM по запросу?