Implement lazy-loading using client-side rendering in AgGrid

I am unable to manually implement lazy-loading in the grid using client-side rendering. The reason for not using row model 'infinite' or 'server-side' is that we do not want to make changes in the backend. There are millions of rows being fetched and we want to do it 200 at a time and then onScroll call the next 200.

The onBodyScroll function seems like a bad approach I am trying to force. Is there a more elegant way to do this?

const onBodyScroll = useCallback((event: BodyScrollEvent) => {
        if (!gridRef.current || props.moreDataLoading) return;
        const { top, bottom } = event.api.getVerticalPixelRange();
        const clientHeight = bottom - top;
        const scrollTop = top;
        const scrollHeight = document.querySelector('.ag-body-vertical-scroll-container')?.clientHeight || 0;

        if (scrollHeight - (scrollTop + clientHeight) <= 500) {
            console.log('onBodyScroll: ', top, bottom, scrollHeight);
            props.fetchMoreData?.();
        }
    }, []);

<AgGridReact
    ref={gridRef}
    columnDefs={columnDefs}
    rowData={rowData}
    defaultColDef={defaultColDef}
    gridOptions={gridOptions}
    loading={props.loading}
    onBodyScroll={onBodyScroll}
/>