Estoy tratando de eliminar un elemento en React haciendo clic en un botón. Actualmente, mi código devuelve Cannot read properties of undefined (reading 'ProductID') y no estoy seguro de por qué, ya que estoy accediendo a él a través de una identificación y debería funcionar. ¿Cómo puedo hacer que mi código funcione correctamente y eliminar el elemento al hacer clic? Aquí está mi intento:

 import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { Grid, GridColumn as Column } from '@progress/kendo-react-grid'; import { sampleProducts } from './sample-products'; const allInEdit = sampleProducts.map((item) => Object.assign( { inEdit: true, }, item ) ); const deleteItem = (item) => { let index = sampleProducts.findIndex( (record) => record.ProductID === item.ProductID ); data.splice(index, 1); return sampleProducts; }; const MyCommandCell = () => { return ( <button className="k-button k-grid-remove-command" onClick={() => deleteItem()} > Remove </button> ); }; const App = () => { const [data, setData] = React.useState(allInEdit); const itemChange = (e) => { let newData = data.map((item) => { if (item.ProductID === e.dataItem.ProductID) { item[e.field || ''] = e.value; } return item; }); setData(newData); }; return ( <Grid data={data} editField="inEdit" onItemChange={itemChange}> <Column field="ProductID" title="Id" width="50px" editable={false} /> <Column field="ProductName" /> <Column field="FirstOrderedOn" editor="date" format="{0:d}" /> <Column field="UnitsInStock" width="150px" /> <Column field="Discontinued" width="50px" editor="boolean" /> <Column cell={MyCommandCell} width="240px" /> </Grid> ); }; ReactDOM.render(<App />, document.querySelector('my-app'));