I am trying to save the values form the DataGridPro MUI, a TreeData ... How can i save Values of the Cells after i edit them

I am novice at this. I am trying to save the values form the DataGridPro MUI, I am using a TreeData. How can i save Values of the Cells after i edit them. I watched a video online in by which i was able to understand how it will work on a Single DataTable, But for the Parent one, i dont know how i will be able to save it. I have looked up but i found no method which could be helpful. I am getting the values from the GridColumn and GridRowsProp.

Basically i want to save the values of the children. how can i save them? Thanks.

import * as React from "react";
    import { DataGridPro, GridColumns, GridRowsProp, DataGridProProps } from "@mui/x-data-grid- 
    pro";
    import {
    GridCellEditCommitParams,
    GridCellEditStopParams,
    GridCellEditStopReasons,
      GridRowModel,
  MuiEvent,
} from "@mui/x-data-grid";
import { applyInitialState } from "@mui/x-data-grid/hooks/features/columns/gridColumnsUtils";

const rows: GridRowsProp = [
  {
    hierarchy: ["Documents"],
    rubrics: "Head of Human Resources",
    totalMarks: "",
    id: 0,
  },
  {
    hierarchy: ["Scope"],
    rubrics: "Head of Sales",
    totalMarks: "15",
    id: 1,
  },
  {
    hierarchy: ["Scope", "Rubric item 1"],
    rubrics: "Sales Person",
    totalMarks: "2",
    id: 2,
  },
  {
    hierarchy: ["Scope", "Rubric item 2"],
    rubrics: "Sales Person",
    totalMarks: "5",
    id: 3,
  },
  {
    hierarchy: ["Scope", "Rubric item 3"],
    rubrics: "Sales Person",
    totalMarks: "8",
    id: 4,
  },
];

const columns: GridColumns = [
  { field: "rubrics", headerName: "Rubric Type", width: 200, editable: true },
  {
    field: "totalMarks",
    headerName: "Total Marks",

    width: 150,
    editable: true,
  },
];

const getTreeDataPath: DataGridProProps["getTreeDataPath"] = (row) => row.hierarchy;

export default function TreeDataSimple() {
  const [state, setState] = React.useState<GridRowModel[]>(applyInitialState); //i was seeing online for this how can i add the array here but no luck.
  const handleCommit = (e: GridCellEditCommitParams) => {
    const array = state.map((r) => {
      if (r.id === e.id) {
        return { ...r, [e.field]: e.value };
      } else {
        return { ...r };
      }
    });
    setState(array);
  };
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGridPro
        treeData
        rows={rows}
        columns={columns}
        getTreeDataPath={getTreeDataPath}
        onCellEditCommit={handleCommit}
        experimentalFeatures={{ newEditingApi: true }}
        onCellEditStop={(params: GridCellEditStopParams, event: MuiEvent) => {
          if (params.reason === GridCellEditStopReasons.cellFocusOut) {
            event.defaultMuiPrevented = true;
          }
        }}
      />
    </div>
  );
}}