How to add a component inside a row cell in MUI data grid?

I want to add components beside text inside a row cell in a material-ui data grid.

I don't want the same component on all the cells in a column row. which means, I don't want to use the renderCell method we define inside the columns prop of the Datagrid to achieve this.

instead, I want each cell to have a different component.

Why I can't simply just define it as:

const columns = [{ field: 'name' }, { field: 'status' } ]
const rows = [
  {
    id: 1,
    name: 'Mehmet',
    status: 'Added successfully!'
  },
  {
    id: 2,
    name: 'Murat',
    status: <> <CircularProgress /> adding user... </>
  },
  {
    id: 3,
    name: 'Ismail',
    status: <> <CircularProgress /> adding user... </>
  },
]

return <DataGridPro columns={columns} rows={rows} />