El tabulador Mui DataGrid causa una advertencia de evento sintético.

Este es el código que utilicé del sitio de Material UI. Cada vez que edito algo, al presionar ENTER o TAB se muestra la siguiente advertencia y no pasa a la siguiente celda. ¿Alguna idea? ¡Gracias de antemano!

index.js:1 Advertencia: Este evento sintético se reutiliza por motivos de rendimiento. Si estás viendo esto, estás accediendo al método key en un evento sintético liberado/nulificado. Esta es una función sin efecto. Si necesitas mantener el evento sintético original, utiliza 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}"></datagrid>
    </div>
  );
}

const columns = [
  { field: 'firstName', headerName: 'Nombre', width: 130, editable: true },
  { field: 'lastName', headerName: 'Apellido', width: 130, editable: true },
  {
    field: 'fullName',
    headerName: 'Nombre completo',
    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' },
];