Material UI react data grid editing custom logic

I am trying to implement the following logic using React material UI.

1. I have a data grid, in that some columns alone are editable.
2. I want to update multiple rows of these editable columns and send to backend using a button click, it looks like this can be done using processRowUpdate function with some additional custom state logic.
3. Apart from above conditions, I also want to handle the case where user is double clicking on a editable cell, but not updating the value. Upon clicking in another place, the save button needs to be disabled and the cell returns to view mode from edit as there are no changes.

To handle 3rd point above, I tried adding the following code mentioned in https://mui.com/x/react-data-grid/editing/#controlled-model. But I see the cell going back to view mode, then again back to edit mode, not sure why it is going back to edit mode.

import * as React from 'react';
import {
  GridColDef,
  GridRowsProp,
  DataGrid,
  GridRowId,
  GridCellModes,
  GridCellModesModel,
} from '@mui/x-data-grid';
import {
  randomCreatedDate,
  randomTraderName,
  randomUpdatedDate,
} from '@mui/x-data-grid-generator';

interface SelectedCellParams {
  id: GridRowId;
  field: string;
}

export default function StartEditButtonGrid() {
  const [selectedCellParams, setSelectedCellParams] =
    React.useState<SelectedCellParams | null>(null);
  const [cellModesModel, setCellModesModel] = React.useState<GridCellModesModel>({});

  const handleCellFocus = React.useCallback(
    (event: React.FocusEvent<HTMLDivElement>) => {
      const row = event.currentTarget.parentElement;
      const id = row!.dataset.id!;
      const field = event.currentTarget.dataset.field!;
      setSelectedCellParams({ id, field });
    },
    [],
  );

  const processRowUpdate = (newRow) => {
    let j = 0
    for (j = 0; j < rows.length; j++) {
      if (rows[j].id === newRow.id) {
        break
      }
    }
    if (!selectedCellParams) {
      return;
    }
    const { id, field } = selectedCellParams;
    if (JSON.stringify(rows[j]) === JSON.stringify(newRow)) {
      setCellModesModel({
        ...cellModesModel,
        [id]: {
          ...cellModesModel[id],
          [field]: { mode: GridCellModes.View, ignoreModifications: true },
        },
      });
    }
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        cellModesModel={cellModesModel}
        onCellModesModelChange={(model) => setCellModesModel(model)}
        processRowUpdate={processRowUpdate}
        slotProps={{
          cell: {
            onFocus: handleCellFocus,
          },
        }}
      />
    </div>
  );
}

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 180, editable: true },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    editable: true,
    align: 'left',
    headerAlign: 'left',
  },
  {
    field: 'dateCreated',
    headerName: 'Date Created',
    type: 'date',
    width: 180,
    editable: true,
  },
  {
    field: 'lastLogin',
    headerName: 'Last Login',
    type: 'dateTime',
    width: 220,
    editable: true,
  },
];

const rows: GridRowsProp = [
  {
    id: 1,
    name: randomTraderName(),
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 2,
    name: randomTraderName(),
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 3,
    name: randomTraderName(),
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 4,
    name: randomTraderName(),
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 5,
    name: randomTraderName(),
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
];

I think apart from above, I also have to prevent some default behavior but is not clear which one. I also see following warning, seems related to my issue, but not sure about the action to take, could someone please help with this?

The options passed to both model props only take effect when mode changes. Updating the params of a cell or row, but keeping the same mode, makes the cell or row to stay in the same mode. Also, removing one field or row ID from the object will not cause the missing cell or row to go to "view" mode.