MUI X Data Grid processRowUpdate gives wrong value from parameter

Question

I have an MUI X Data Grid with processRowUpdate property. The function I have is

(newRow, oldRow) => {
  setLineItemRows((prevVals) =>
    prevVals.map((row) => {
      if (row.id === newRow.id) return { ...row, ...newRow };
      return row;
    })
  );
}

Here is my datagrid

<DataGrid
  sx={{
    height: 500,
    bgcolor: "white",
    fontSize: "0.92em",
    marginTop: "0.75rem",
  }}
  rows={lineItemRows}
  columns={lineItemsCols}
  disableRowSelectionOnClick
  editMode="row"
  rowModesModel={rowModesModel}
  onRowModesModelChange={handleRowModesModelChange}
  onRowEditStop={handleRowEditStop}
  processRowUpdate={(newRow) => {
    console.log(lineItemRows);
    setEditItem(false);
    console.log(newRow, "new row enq");
    setLineItemRows((prevVals) =>
      prevVals.map((row) => {
        if (row.id === newRow.id) return { ...row, ...newRow };
        return row;
      })
    );
  }}
  onProcessRowUpdateError={(e) => {
    console.log(e);
  }}
  initialState={{
    pagination: {
      paginationModel: { pageSize: 25, page: 0 },
    },
  }}
  getRowClassName={({ row }) => {
    if (row.status === "Reject") return "datagrid-row-red";
  }}
/>

While logging the newArray, I get the second log result (from the image) and the first log message(array) is the array that i am passing to the rows property in my DataGrid. The third log message is generated from onProcessRowUpdateError

Here is the CodeSandbox: https://codesandbox.io/s/modest-marco-jp65t9?file=/src/App.js