I am using AgGridReact to fetch API data and populate over a grid. When I render the grid initially, it is showing all the pagination options properly. But when I change the page size from default 10 to 20, the Navigation Summary section is showing the summary as “1 to ? of 230” instead of “1 to 20 of 230”. We are using the server side pagination.
Below is the code.

import { useEffect, useState, useRef, useCallback } from "react";
import { AgGridReact } from "ag-grid-react";
import { GridApi, GridOptions } from "ag-grid-community";
import styled from "styled-components";
import { MyApiUtil } from "../../common/http-common";
import debounce from "lodash/debounce";
const StyledAgGridReact = styled(AgGridReact)`
  .ag-paging-button.ag-disabled {
    cursor: not-allowed;
  }
`;
export const defaultColumns = [
  {
    ... some columns
  },
];
export const MyComponent = () => {
  const [gridApi, setGridApi] = useState<GridApi | null>(null);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const gridRef = useRef<GridApi | null>(null);
  const title = "My Notifications";
  const tableContentRef = usePreventTableScrollingRef();
  const debouncedGetMyNotifications = useCallback(
    debounce(async (params, rowsPerPage, page = 0) => {
      try {
        const response = await MyApiUtil.get(
          `${MY_NOTIFICATIONS_API_URL}?pageNumber=${page}&pageSize=${rowsPerPage}`
        );
        if (response.data.myNotificationsCount === 0) {
          gridRef.current?.showNoRowsOverlay();
        } else {
          gridRef.current?.hideOverlay();
        }
        params.successCallback(
          response.data.myNotificationsList,
          response.data.myNotificationsCount || 0
        );
      } catch (error) {
        gridRef.current?.showNoRowsOverlay();
        params.successCallback([], 0);
      }
    }, 500),
    []
  );
  const getMyNotifications = (params, rowsPerPage, page = 0) => {
    debouncedGetMyNotifications(params, rowsPerPage, page);
  };
  const handleGridReady = (params) => {
    gridRef.current = params.api;
    updateDatasource(params.api, searchInputValue);
  };
  const updateDatasource = (api) => {
    api.updateGridOptions({
      datasource: {
        getRows: (params) => {
          const page = Math.floor(params.startRow / api.paginationGetPageSize()
          );
          getMyNotifications(params, api.paginationGetPageSize(), page);
        },
      },
    });
  };
  const getRefresh = () => {
    if (gridRef.current) {
      updateDatasource(gridRef.current, searchInputValue);
    }
  };
  useEffect(() => {
    if (gridApi) {
      updateDatasource(gridApi, searchInputValue);
    }
  }, [rowsPerPage, gridApi]);
  const gridOptions: GridOptions = {
    columnDefs: defaultColumns,
    rowModelType: "infinite",
    defaultColDef: { flex: 1 },
    onPaginationChanged: (event) => {
      if (event.api) {
        const pageSize = event.api.paginationGetPageSize();
        setRowsPerPage(pageSize);
      }
    },
    onFirstDataRendered: (event) => {
      if (event.api) {
        const dynamicPageSize = event.api.paginationGetPageSize();
        event.api.updateGridOptions({ paginationPageSize: dynamicPageSize });
        setRowsPerPage(dynamicPageSize);
      }
    },
    paginationPageSizeSelector: [10, 20, 50, 100],
  };
  const rowHeight = 32;
  const numberOfRowsToShow = 10;
  const tableContentHeight = rowHeight * (numberOfRowsToShow + 1) + 1;
  return (
    <StyledCard>
      <SimpleTableWrapper>
        <StyledTitle>
          <SimpleTableTitle>{title}</SimpleTableTitle>
        </StyledTitle>
        <TableContainer
          agGridVersion="30.2"
          data-testid="myNotificationTableContainer"
        >
          <TableContent
            data-testid="table-content"
            ref={tableContentRef}
            style={{ height: `${tableContentHeight}px` }}
          >
            <StyledAgGridReact
              gridOptions={gridOptions}
              pagination={true}
              onGridReady={handleGridReady}
              paginationPageSize={rowsPerPage}
              cacheBlockSize={rowsPerPage}
              enableCellTextSelection={true}
            />
          </TableContent>
        </TableContainer>
      </SimpleTableWrapper>
    </StyledCard>
  );
};

Thanks in advance.

I tried debugging the code to see the pagination params, but did not understand how exactly the summary section is rendering.