React agGrid - функция перестает работать после использования useEffect ()

Я новичок в реакции, поэтому прошу прощения, если это элементарно. Я пытаюсь имитировать группировку в AgGrid без функций Enterprise, используя таблицу, отображаемую в строке полной ширины, это работает нормально, когда я дважды щелкаю строку, чтобы развернуть ее. Проблема, с которой я сталкиваюсь, заключается в том, что при вставке новой строки мне нужна переменная состояния, чтобы определить, какая строка должна быть расширена с помощью новой вставки. (поскольку развернутая строка над ней отбрасывает индексацию).

Как только я инициализирую эту переменную состояния индексации в useEffect, функция раскрытия двойного щелчка onCellDoubleClicked={ExpandRow} перестает работать, возвращая

:×
TypeError: gridOptions.paginationSetPageSize is not a function

Несмотря на то, что я могу использовать его до этого, заранее спасибо и извините, вся конструктивная критика приветствуется.

import React, { useState, useEffect } from "react";
import FullWidthCellRenderer from "../AGGrid/FullWidthCellRenderer";

import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
//import { GridApi } from "ag-grid-community";

function Dashboard() {
  // const [gridApi, setGridApi] = useState();
  // const [columnApi, setcolumnApi] = useState();
  //let [pageSize, setPageSize] = useState(10);

  let [expandedRow, setExpandedRow] = useState(0);
  let [expandingRow, setExpandingRow] = useState(0);
  let [rowInsertIncr, setRowInsertIncr] = useState(0);

  useEffect(() => {
    console.log(
      "expanding row is: " +
        expandingRow +
        ", and expaded row is: " +
        expandedRow
    );
    if (expandingRow > expandedRow) {
      setRowInsertIncr(1);
      console.log("TestLog:expanding row is more than the expanded one, setting incr to:" + rowInsertIncr);
    } else {
      setRowInsertIncr(2);
      console.log("TestLog:expanding row is more than the expanded one, setting incr to:" + rowInsertIncr);
    }
    setExpandedRow(expandingRow);
  }, [expandingRow]);

  const [columnDefs, setColumnDefs] = useState([
    ColumnsHere
  ]);
  const [rowData, setRowData] = useState([
    RowsHere
  ]);

  var gridOptions = {
    isFullWidthCell: function (rowNode) {
      return isFullWidth(rowNode.data);
    },
    frameworkComponents: {
      fullWidthCellRenderer: FullWidthCellRenderer,
    },
    fullWidthCellRenderer: "fullWidthCellRenderer",
    getRowHeight: function (params) {
      return isFullWidth(params.data) ? 150 : 25;
    },
  };

  function isFullWidth(data) {
    return ["false"].indexOf(data.collapsed) >= 0;
  }

  function getSelectedRowData() {
    const selectedNodes = gridOptions.getSelectedNodes();
    const selectedData = selectedNodes.map((node) => node.data);
    return selectedData;
  }

  function getSelectedRowIndex() {
    //This function should get the cell that is double clicked on and return an integer. 
  // return gridOptions.getFocusedCell().rowIndex;  -> this also does not work even though it returns an integer
  return (expandingRow +1);    //using this instead
  }

  function DoubleClicked() {
    console.log("setting Expanding row to: " + getSelectedRowIndex());
    setExpandingRow(getSelectedRowIndex());
  }

  function ExpandSelectedRow() {
    var ExpandedRowData = [
      {
        collapsed: "false",
      },
    ];
    var increment = 1;

    gridOptions.applyTransaction({
      add: ExpandedRowData,
      addIndex: gridOptions.getFocusedCell().rowIndex + increment,
    });

    IncrPage();
  }

  function ExpandRow() {
    console.log("redrawingRows");
    DecrPage();
    RedrawRows();
    IncrPage();
    console.log("expanding row");
    ExpandSelectedRow();
  }

  function RedrawRows() {
    gridOptions.paginationSetPageSize(Number(10));
    console.log({ rowData });
    gridOptions.setRowData(rowData);
    gridOptions.refreshCells();
    gridOptions.redrawRows();
  }

  function onGridReady(params) {
    gridOptions = params.api;
    gridOptions.columnApi = params.columnApi;
    params.api.sizeColumnsToFit();
  }

  function IncrPage() {
    gridOptions.paginationSetPageSize(Number(11));
  }

  function DecrPage() {
    gridOptions.paginationSetPageSize(Number(10));
  }

  return (
    <div className="ag-theme-balham" style={{ height: "450px", width: "98%" }}>
      <br></br>
      <h1>Home</h1>
      <hr></hr>
      <AgGridReact
        pagination={true}
        paginationPageSize={10}
        columnDefs={columnDefs}
        rowData={rowData}
        rowSelection="single"
        onGridReady={onGridReady}
        isFullWidthCell={gridOptions.isFullWidthCell}
        frameworkComponents={gridOptions.frameworkComponents}
        fullWidthCellRenderer={gridOptions.fullWidthCellRenderer}
        getRowHeight={gridOptions.getRowHeight}
        onCellDoubleClicked={ExpandRow}
      ></AgGridReact>

      <h3>TestingButtons</h3>
      <button onClick={DecrPage}>decr</button>
      <button onClick={IncrPage}>incr</button>
      <button onClick={ExpandSelectedRow}>expand</button>
      <button onClick={RedrawRows}>redraw</button>
      <button onClick={DoubleClicked}>onDoubleClick</button>
    </div>
  );
}

export default Dashboard;