Mui DataGrid - expandable content in row

Question

I need to create datagrid where one column (details) might have plenty of content. Idea is to show max 8 lines. In case if content doesn't fit in 8 lines I should show button "show more" which will expand the row and show all rest. Thing is I don't really know how to approach to that. I created column where I set maximum amount of lines 8, but no idea how to calculate total amount of lines and in case if it should have more then 8 then show "add" button which will increase the height

const columns: GridColDef[] = [
    {
      field: 'title',
      headerName: t`Title`,
      flex: 1,
    },
    {
      field: 'details',
      headerName: t`Details`,
      flex: 2,
      renderCell: ({ row }) => (
        <Box sx={{
          padding: 1,
        }}
        >
          <Typography
            variant="body2"
            sx={{
              display: '-webkit-box',
              overflow: 'hidden',
              WebkitBoxOrient: 'vertical',
              WebkitLineClamp: 8,
            }}
          >
            {row.details}
          </Typography>
          <Button
            sx={{
              color: 'primary',
              padding: 0,
              margin: 0,
            }}
          >
            Show more
          </Button>
        </Box>
      ),
    },
  ];

return (
 <DataGrid
          sx={{
            border: 0,
            '& .MuiDataGrid-columnHeaders': {
              backgroundColor: '#F5F6F8',
            },
          }}
          isRowSelectable={() => false}
          autoHeight
          getRowHeight={() => 'auto'}
          loading={false}
          columns={columns}
          rows={mockData || []}
          rowCount={5}
          page={currentPage}
          onPageChange={() => {
          }}
          onPageSizeChange={setPageSize}
          pageSize={pageSize}
          rowsPerPageOptions={[25, 50, 100]}
        />
)

EDIT: I got idea how to increase and decrease amount of showing lines, I just onClick set the state with id of clicked row, and just expand it or shrink by comparing Id and setting WebkitLineClamp to "auto" or 8. Thing is I still don't know how to calculate amount of lines in each row as it doesn't have sense to show this "show more" button if amount of lines is lower than 8