How can I get a MUI grid to adjust row height for dynamic content?

Question

I am new to React MUI DataGrid, trying to create a table look like the following. How do i create a column with Tags as its values, the height of the row should be dynamically adjusted based on the number of items in Tag column.

I did the following to create a tag column in data grid. But the row height is static and the elements get cut if the number of tags is high.

columns = [{
      field: "tags",
      headerName: "Tags",
      renderCell: (params) => (
        <Stack direction="row" spacing={0.25}>
          <Fragment>            
            {params.row.tags.map((tag) => (
              <Chip label={tag} />
            ))}
          </Fragment>
        </Stack>
      ),
      editable: true,
      flex: 2.5,
    }]

Answer 1

After some help from the comments, i was able to get the answer. Had to remove the <Stack> in the renderCell option and add getRowHeight={() => "auto"} to <DataGrid />. <Stack> was preventing the cell values from getting wrapped.