El problema está en su método onToggleEditMode . Está conservando bien el valor anterior durante el controlador onChange , y está reemplazando el valor temporal con el anterior durante el controlador onRevert correctamente. Sin embargo, en ese controlador onRevert , actualiza el estado de las filas con setRows y luego llama a la función onToggleEditMode directamente después, que aún hace referencia al objeto de estado de las filas obsoletas.

 const onToggleEditMode = id => { setRows(state => { return rows.map(row => { if (row.id === id) { return { ...row, isEditMode: !row.isEditMode }; } return row; }); }); };

Debe usar ese parámetro de state en la segunda línea para no anular el nuevo valor que acaba de guardar y crear una condición de carrera. Actualicé el método a lo siguiente (también limpié el método del mapa de filas) y funcionó en la zona de pruebas:

 const onToggleEditMode = (id) => { setRows((state) => state.map((row) => ({ ...row, isEditMode: row.id === id ? !row.isEditMode : row.isEditMode })) ); }

El ejemplo que proporcionaste muestra que onChange() anula las filas:

 setRows(newRows);

Mi sugerencia sería crear una copia preliminar de la fila editada (ya que solo se puede editar una al mismo tiempo). Luego, sobrescriba los datos reales con el borrador si hace clic en "aprobar"; de lo contrario, no haga nada. El comportamiento que describe es realmente solo la lógica personalizada en el código, no hay nada específico de MUI al respecto. Aprenderá mejor cómo hacerlo si lo hace por su cuenta. Sin embargo, puedo verificar tu ejemplo.