After implementing the drag and drop feature on AG Grid table, I'm looking for a way to get the current state with the updated order/index of rows.
My goal is to persist the table data after changing the order, but can't find the respective state of the current order. I'd appreciate any help or any idea.
Sandbox demo and example code below

import React from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
function App() {
  const [gridApi, setGridApi] = React.useState(null);
  const [gridColumnApi, setGridColumnApi] = React.useState(null);

  const onGridReady = (params) => {
    setGridApi(params.api);
    setGridColumnApi(params.columnApi);
  };

  const defaultColDef = {
    flex: 1,
    editable: true
  };

  const columnDefs = [
    {
      headerName: "Name",
      field: "name",
      rowDrag: true
    },
    { headerName: "stop", field: "stop" },
    {
      headerName: "duration",
      field: "duration"
    }
  ];

  const rowData = React.useMemo(
    () => [
      {
        name: "John",
        stop: 10,
        duration: 5
      },
      {
        name: "David",
        stop: 15,
        duration: 8
      },
      {
        name: "Dan",
        stop: 20,
        duration: 6
      }
    ],
    []
  );

  return (
    <div>
      <h1 align="center">React-App</h1>
      <div>
        <div className="ag-theme-alpine" style={{ height: "700px" }}>
          <AgGridReact
            columnDefs={columnDefs}
            rowData={rowData}
            defaultColDef={defaultColDef}
            onGridReady={onGridReady}
            rowDragManaged={true}
          ></AgGridReact>
        </div>
      </div>
    </div>
  );
}

export default App;