ag-grid-react does not work data tree with infinite scroll?

Question

https://www.ag-grid.com/react-data-grid/tree-data/#example-org-hierarchy
I customised this sample to use tree data with infinite scroll

▼ This is original result (Im gonna change data and add scroll-infinite)

index.js

・
・
・
const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
  const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
  const [rowData, setRowData] = useState<any[]>(getData());
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    // **** change column definitions *****
    { field: 'athlete', suppressMenu: true },
    {
      field: 'age',
      filterParams: {
        filterOptions: ['equals', 'lessThan', 'greaterThan'],
        suppressAndOrCondition: true,
      },
    },
    {
      field: 'country',
    },
    {
      field: 'year',
      filter: 'agSetColumnFilter',
      filterParams: { values: ['2000', '2004', '2008', '2012'] },
    },
    { field: 'date' },
    { field: 'sport', suppressMenu: true },
    { field: 'gold', suppressMenu: true },
    { field: 'silver', suppressMenu: true },
    { field: 'bronze', suppressMenu: true },
    { field: 'total', suppressMenu: true },
  ]);

  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
    };
  }, []);

   // **** add this function ****
  const autoGroupColumnDef = useMemo<ColDef>(() => {
    return {
      headerName: 'Hierarchy',
      field: 'hierarchy',
      minWidth: 200,
      cellRendererParams: {
        suppressCount: true,
      },
    };
  }, []);

  const onFilterTextBoxChanged = useCallback(() => {
    gridRef.current!.api.setQuickFilter(
      (document.getElementById('filter-text-box') as any).value
    );
  }, []);

  // **** add this function ****
  // ▼ (refer to this page)
  // https://www.ag-grid.com/react-data-grid/infinite-scrolling/#example-simple
  const onGridReady = useCallback((params: GridReadyEvent) => {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then((resp) => resp.json())
      .then((data) => {
        data = getData() // **** add here **** (get data from data.js, overwrite data)
        const dataSource: IDatasource = {
          rowCount: undefined,
          getRows: function (params) {
            console.log(
              'asking for ' + params.startRow + ' to ' + params.endRow
            );
            setTimeout(function () {
              const rowsThisPage = data.slice(params.startRow, params.endRow);
              let lastRow = -1;
              if (data.length <= params.endRow) {
                lastRow = data.length;
              }
              console.log(rowsThisPage)
              params.successCallback(rowsThisPage, lastRow);
            }, 500);
          },
        };
        params.api.setDatasource(dataSource);
      });
  }, []);

  return (
    <div style={containerStyle}>
      <div className="example-wrapper">
        <div style={gridStyle} className="ag-theme-alpine">
          <AgGridReact
            ref={gridRef}
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            autoGroupColumnDef={autoGroupColumnDef} // **** add here ****
            treeData={true} // **** add here ****
            animateRows={true} // **** add here ****
            groupDefaultExpanded={-1} // **** add here ****
            getDataPath={data=>data.hierarchy} // **** add here ****
            rowModelType={'infinite'} //**** add here ****
            onGridReady={onGridReady} // **** add here ****
          ></AgGridReact>
        </div>
      </div>
    </div>
  );
};

render(<GridExample></GridExample>, document.querySelector('#root'));

data.js

function getData() {
  var rowData = [
    {"hierarchy":['1'],"athlete":"Michael Phelps","age":23,"country":"United States","year":2008,"date":"24/08/2008","sport":"Swimming","gold":8,"silver":0,"bronze":0,"total":8},
    {"hierarchy":['1','2'], "athlete":"Michael Phelps","age":19,"country":"United States","year":2004,"date":"29/08/2004","sport":"Swimming","gold":6,"silver":0,"bronze":2,"total":8},
    {"hierarchy":['1', '2'], "athlete":"Michael Phelps","age":27,"country":"United States","year":2012,"date":"12/08/2012","sport":"Swimming","gold":4,"silver":2,"bronze":0,"total":6}
  ];
  return rowData;
}

Result

show hierarchy just as text

I just customised wrong way or data-tree with infinite-scroll is impossible?