How Do I Correctly use CellMeasurer to set Table Column Width Based on the Content Length?

Question

I'm trying to dynamically set the column width using CellMeasurer in a dynamic created Columns.

// hoping that CellMeasurer is what I needed to adjust
// width of my table columns, but not working.
const cellRenderer = ({ columnIndex, key, parent, rowIndex, style }) => {
    const content = list[rowIndex][columnHeader[columnIndex].columnName];
    return (
      <CellMeasurer
        cache={cache}
        columnIndex={columnIndex}
        key={key}
        parent={parent}
        rowIndex={rowIndex}
      >
        <div
          style={{
            ...style,
            height: 35,
            whiteSpace: "nowrap"
          }}
        >
          {content}
        </div>
      </CellMeasurer>
    );
  };

  const cache = new CellMeasurerCache({
    defaultWidth: 100,
    minWidth: 75,
    fixedHeight: true
  });

return (
<AutoSizer>
  {({ height, width }) => (
    <div width={width}>
      <Table
        width={width}
        height={500} // why can't i use {height} here?
        headerHeight={40}
        rowHeight={30}
        rowCount={list.length}
        rowGetter={({ index }) => list[index]}
      >
        // Dynamically create Column
        {columnHeader.map((columnData, i) => (
          <Column
            width={800}
            onClick={this.onHeaderClick}
            label={columnData.displayName}
            dataKey={columnData.columnName}
            cellRenderer={cellRenderer}
            {...this.props}
            key={i}
          />
        ))}
      </Table>
    </div>
  )}
</AutoSizer>
);

Here is the example code: https://codesandbox.io/s/mzj5y255kj

I want to set the column 'News' to as long as the length in the text.

Result would be that no matter what the content length is, the column will grow.