¿Cómo elimino la fila seleccionada de mi tabla? Entiendo que el concepto es eliminar la fila de la matriz.

 const columns = [ {field: 'ticketno', headerName: 'Ticket No', flex:1}, {field: 'event', headerName: 'Event Type', flex:1}, {field: 'area', headerName: 'Area', flex:1}, {field: 'created_date', headerName: 'Date Created', flex:1}, {field: 'status', headerName: 'Status', flex:1}, {field: 'action', headerName: 'Action', flex:1, renderCell: () => { return [ <IconButton> <Delete style={{color:'gray'}}/> </IconButton> ] }} ] let rows = [] for (var x = 0; x<tabledata.length; x++) { rows.push({ id:x, ticketno:tabledata[x].TKT_NO, event:tabledata[x].EVT_ID, area:tabledata[x].ZNAME, created_date:tabledata[x].CRT_DATE, status:tabledata[x].STATUS_DESC, }) } <Box sx={{height: 550, width: '100%'}}> <DataGrid rows = {rows} pageSize={10} rowsPerPageOptions={[10]} checkboxSelection disableSelectionOnClick components= {{Toolbar: GridToolbar }} componentsProps={{toolbar: {showQuickFilter: true, quickFilterProps: {debounceMS: 500}}}} columns = {columns}/> </Box>

Adjunté una imagen a continuación, al hacer clic en el ícono de eliminar, debería eliminar la fila de la vista. Un ejemplo