I’m working on a React application using Material-UI’s DataGrid component (from @mui/x-data-grid). I have rows that are editable, and I want to customize the behavior when the user interacts with the grid:

Behavior Needed:
When a row is in edit mode (GridRowModes.Edit), pressing Enter should not save the row immediately. Instead, it should move the focus to the next editable column in the same row.
Saving the row should only occur when the user clicks a “Save” button or navigates away from the row (e.g., clicks outside the row).

Material-UI DataGrid Example:
I’m following the example provided in the Material-UI documentation for inline editing:
Material-UI DataGrid Inline Editing
https://mui.com/x/react-data-grid/editing/