reactjs - Jag försöker spara värdena från MUI X Data Grid Pro, ett TreeData ... Hur kan jag spara värdena i cellerna efter att jag redigerat dem

Jag är nybörjare på detta. Jag försöker spara värdena från MUI X Data Grid Pro, jag använder Tree Data. Hur kan jag spara värdena i cellerna efter att jag redigerat dem. Jag tittade på en video online där jag kunde förstå hur det fungerar på en enkel DataTable, men för föräldertabellen vet jag inte hur jag skulle kunna spara det. Jag har letat men jag har inte hittat någon metod som kan vara användbar. Jag får värdena från GridColumn och GridRowsProp.

I princip vill jag spara värdena på barnen. Hur kan jag spara dem? Tack.

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>
  );
}}