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

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.