MUI datagrid, button in cell requires two clicks

Question

I am using the MUI datagrid. In one of the columns, I am rendering a button. This all works, but I have noticed that the button only picks up on the onClick event, if the cell has been selected first. Thus it requires two clicks from the user to activate the button. The first selecting the cell, the second actually the button. How can I make it so the cell doesnt require selection first to pickup the buttons events? I have tried disableRowSelectionOnClick for the datagrid but it didnt help

  const renderTools = (params) =>
    <Tooltip title="Delete" placement="top" arrow>
      <IconButton onClick={()=>confirmDelete(params.value)}>
        <Iconify icon="solar:trash-bin-trash-bold"/>
      </IconButton>
    </Tooltip>

  const renderUser = (params) => <Stack spacing={2} direction="row" alignItems="center">
    {renderAvatar(params.value.avatar)}{params.value.email}
  </Stack>

  const columns = [
    {field: 'user', renderCell: renderUser, headerName: '', width: 550},
    {field: "tools", renderCell: renderTools, headerName: '', width: 100, align: "right"}
  ]

  const rows = [
    {id: 1, user: {email: '[email protected]', avatar: "AB"}, tools: '[email protected]'},
    {id: 2, user: {email: '[email protected]', avatar: "CD"}, tools: '[email protected]'},
  ]

    <DataGrid
            
            rows={rows}
            columns={columns}
            initialState={{
              pagination: {
                paginationModel: {page: 0, pageSize: 5},
              },
            }}
            pageSizeOptions={[5, 10, 20]}
            slots={{
              columnHeaders: () => null,
            }}
            sx={{
              '& .MuiDataGrid-cell:focus': {
                outline: 'none',
              },
              '& .MuiDataGrid-cell:focus-within': {
                outline: 'none',
              }
            }}
          />

Answer 1

Turns out I should have been using a column definition of action and the GridActionsCellItem component.

See the CRUD example https://mui.com/x/react-data-grid/editing/