Mui DataGrid Tab causes synthetic event warning

Question

This is the code I used from material UI site. Every time I edit something, pressing ENTER or TAB will result in the following warning and won't proceed to next cell. Any ideas? TIA!

index.js:1 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method key on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist().

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';

function getFullName(params) {
  return `${params.row.firstName || ''} ${params.row.lastName || ''}`;
}

function setFullName(params) {
  const [firstName, lastName] = params.value.toString().split(' ');
  return { ...params.row, firstName, lastName };
}

export default function ValueGetterSetterGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={defaultRows} columns={columns} />
    </div>
  );
}

const columns = [
  { field: 'firstName', headerName: 'First name', width: 130, editable: true },
  { field: 'lastName', headerName: 'Last name', width: 130, editable: true },
  {
    field: 'fullName',
    headerName: 'Full name',
    width: 160,
    editable: true,
    valueGetter: getFullName,
    valueSetter: setFullName,
    sortComparator: (v1, v2) => v1.toString().localeCompare(v2.toString()),
  },
];

const defaultRows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon' },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei' },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime' },
  { id: 4, lastName: 'Stark', firstName: 'Arya' },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys' },
];