How do I delete the selected row from my table, I do understand the concept is that to remove the row from the array.

    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>

I have attached an image below, upon clicking onto the delete icon, it should remove the row from view. An example