editable column group not updating text when using tree data in ag-grid

Question

I am trying to edit Organisation Hierarchy column in treeData in ag-grid and update the text in the cell when edits the column cell.

The cell is editable but the text are not updating in the cell.

https://codesandbox.io/s/64024419can-we-toggle-between-tree-view-and-flat-view-forked-q1ewn?file=/src/Grid.tsx

Grid.tsx

const columnDefs: ColDef[] = [
  { field: "jobTitle" },
  { field: "employmentType" }
];

const _rowData = [
  {
    orgHierarchy: ["Erica Rogers"],
    jobTitle: "CEO",
    employmentType: "Permanent"
  },
  {
    orgHierarchy: ["Malcolm Barrett"],
    jobTitle: "Exec. Vice President",
    employmentType: "Permanent"
  },
  {
    orgHierarchy: ["Esther Baker"],
    jobTitle: "Director of Operations",
    employmentType: "Permanent"
  },
  {
    orgHierarchy: ["Brittany Hanson"],
    jobTitle: "Fleet Coordinator",
    employmentType: "Permanent"
  },
  {
    orgHierarchy: ["Malcolm Barrett", "Esther Baker", "Leah Flowers"],
    jobTitle: "Parts Technician",
    employmentType: "Contract"
  },
  {
    orgHierarchy: ["Malcolm Barrett", "Esther Baker", "Tammy Sutton"],
    jobTitle: "Service Technician",
    employmentType: "Contract"
  },
  {
    orgHierarchy: ["Erica Rogers", "Derek Paul"],
    jobTitle: "Inventory Control",
    employmentType: "Permanent"
  },
  {
    orgHierarchy: ["Malcolm Barrett", "Francis Strickland"],
    jobTitle: "VP Sales",
    employmentType: "Permanent"
  },
  {
    orgHierarchy: ["Malcolm Barrett", "Morris Hanson"],
    jobTitle: "Sales Manager",
    employmentType: "Permanent"
  },
  {
    orgHierarchy: ["Malcolm Barrett", "Todd Tyler"],
    jobTitle: "Sales Executive",
    employmentType: "Contract"
  },
  {
    orgHierarchy: ["Erica Rogers", "Bennie Wise"],
    jobTitle: "Sales Executive",
    employmentType: "Contract"
  },
  {
    orgHierarchy: ["Erica Rogers", "Joel Cooper"],
    jobTitle: "Sales Executive",
    employmentType: "Permanent"
  }
];

type AgGridApi = {
  grid?: GridApi;
  column?: ColumnApi;
};

function Grid() {
  const displayTree = React.useRef(true);
  const apiRef = React.useRef<AgGridApi>({
    grid: undefined,
    column: undefined
  });
  const onGridReady = (params: GridReadyEvent) => {
    apiRef.current.grid = params.api;
    apiRef.current.column = params.columnApi;
  };
  const updateDisplayTree = (tree) => () => {
    displayTree.current = tree;
    apiRef.current.grid?.setRowData(_rowData);
  };

  return (
    <>
      <button onClick={updateDisplayTree(true)}>Tree</button>
      <button onClick={updateDisplayTree(false)}>Flat</button>
      <div style={{ height: "80vh" }}>
        <div
          style={{ height: "100%", width: "100%" }}
          className="ag-theme-balham"
        >
          <AgGridReact
            rowSelection="multiple"
            // suppressRowClickSelection
            enableGroupEdit={true}
            columnDefs={columnDefs}
            defaultColDef={{ 
               editable: true,
              resizable: true
            }}
            treeData
            autoGroupColumnDef={{
              headerName: "Organisation Hierarchy",
              minWidth: 300
            }}
            getDataPath={(data) => {
              if (displayTree.current) {
                return data.orgHierarchy;
              } else {
                return data.orgHierarchy.slice(-1);
              }
            }}
            groupDefaultExpanded={-1}
            onGridReady={onGridReady}
            rowData={_rowData}
          />
        </div>
      </div>
    </>
  );
}