Show tooltip on overflow text in material UI in table cell with dynamically rendered rows

Question

I am using a material UI table to render some rows of data. For a particular column I have a scenario wherein data might overflow the cell width. I want to show ellipsis for overflow-text and have a tooltip show the entire text only for cells that have the ellipsis style.

Below is the current code snippet for reference.

I need to have tooltip only for overflowing cells with ellipsis style. Maybe I can use useRef, but I am not sure how to use it here in a loop. Can somebody provide any insights on this?

<Table>
  <TableBody>
    {data.map((obj, index) => (
      <TableRow key={obj.rowId}>
        <TableCell>{obj.name}</TableCell>
        <TableCell>
          <Tooltip title={obj.description}>
            <div id={obj.rowId}
                 style={{whiteSpace: 'nowrap',
                         overflow: 'hidden',
                         textOverflow: 'ellipsis',
                         width: '300px',
                 }}>
              {obj.description}
            </div>
          </Tooltip>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>