How to increment a cell in AG Grid React tabel?

Pretty new with AG Grid library and stuck on updating the cells.
In reality, I need to do the task with dates, but just to keep it simple, I'll explain my problem with simple numbers. I have

1. Start, which is 1.
   
2. Stop, which is already defined
3. End
4. Duration, which is already defined

My goal

• Start = Duration + End
• End = Start + Stop

Here is what I have so far

Desired result

Sandbox Link and code below

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

  const columnDefs = [
    {
      headerName: "Name",
      field: "name"
      //valueGetter: (params) => console.log(params)
    },
    {
      headerName: "start",
      field: "start",
      valueGetter: (params) => {
        if (params.node.rowIndex !== 0) {
          return params.getValue("end") + params.data.duration;
        } else {
          return start;
        }
      }
    },
    { headerName: "stop", field: "stop" },
    {
      headerName: "end",
      colId: "end",
      valueGetter: (params) => {
        return params.data.start + params.data.stop;
      }
    },
    {
      headerName: "duration",
      field: "duration",
      colId: "duration"
    }
  ];
  const rowData = React.useMemo(
    () => [
      {
        name: "John",
        stop: 10
      },
      {
        name: "David",
        stop: 15
      },
      {
        name: "Dan",
        stop: 20
      }
    ],
    []
  );

  const durationArray = [5, 8, 6];
  const rowDataWithStart = React.useMemo(() => {
    if (durationArray) {
      return (
        rowData &&
        rowData.map((row, i) => ({
          ...row,
          start: start,
          duration: durationArray[i]
        }))
      );
    }
  }, [start, rowData, durationArray]);

  const defaultColDef = {
    flex: 1,
    editable: true
  };
  const onGridReady = (params) => {
    setGridApi(params.api);
    setGridColumnApi(params.columnApi);
  };

  return (
    <div className="App">
      <h1 align="center">React-App</h1>
      <div className="ag-theme-alpine">
        <AgGridReact
          columnDefs={columnDefs}
          rowData={rowDataWithStart}
          defaultColDef={defaultColDef}
          domLayout={"autoHeight"}
          onGridReady={onGridReady}
        ></AgGridReact>
      </div>
    </div>
  );
}

export default App;

Any help will be appreciated