Dynamic grid maximum update depth exceeded. #391

import React from "react";
import {
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { useVirtualizer } from "@tanstack/react-virtual";


const TableModelGridVirtual = ({ data, columns }) => {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  const { rows } = table.getRowModel();

  const parentRef = React.useRef();

  const rowVirtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 30,
  });

  const columnVirtualizer = useVirtualizer({
    horizontal: true,
    count: columns.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 125,
  });

  const halfWay = Math.floor(rows.length / 2);

  return (
    <>
      <div className="py-2 flex gap-2">
        <button onClick={() => rowVirtualizer.scrollToIndex(halfWay)}>
          Scroll to index {halfWay}
        </button>
        <button onClick={() => rowVirtualizer.scrollToIndex(rows.length - 1)}>
          Scroll to index {rows.length - 1}
        </button>
      </div>

      <div
        ref={parentRef}
        className="List"
        style={{
          height: `400px`,
          width: `100%`,
          overflow: "auto",
        }}
      >
        <div
          style={{
            height: rowVirtualizer.getTotalSize(),
            width: columnVirtualizer.getTotalSize(),
            position: "relative",
          }}
        >
          {rowVirtualizer.getVirtualItems().map((virtualRow) => (
            <React.Fragment key={virtualRow.key}>
              {columnVirtualizer.getVirtualItems().map((virtualColumn) => {
                const cell =
                  rows[virtualRow.index].getVisibleCells()[virtualColumn.index];
                console.log(cell);
                return (
                  <div
                    key={virtualColumn.key}
                    ref={(el) => {
                      virtualRow.measureElement(el);
                      virtualColumn.measureElement(el);
                    }}
                    className={
                      virtualColumn.index % 2
                        ? virtualRow.index % 2 === 0
                          ? "ListItemOdd"
                          : "ListItemEven"
                        : virtualRow.index % 2
                        ? "ListItemOdd"
                        : "ListItemEven"
                    }
                    style={{
                      position: "absolute",
                      top: 0,
                      left: 0,
                      transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
                    }}
                  >
                    <div
                      style={{
                        height: rows[virtualRow.index],
                        width: columns[virtualColumn.index],
                      }}
                    >
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </div>
                  </div>
                );
              })}
            </React.Fragment>
          ))}
        </div>
      </div>
    </>
  );
};

export default TableModelGridVirtual;