How to use the react-virtualized.CellMeasurerCache function in react-virtualized

import {
  AutoSizer,
  List as VirtualList,
  WindowScroller,
  CellMeasurer,
  CellMeasurerCache,
} from 'react-virtualized';
import { CSSTransition } from 'react-transition-group';

import { EventKind } from '../../module/k8s';

// Keep track of seen events so we only animate new ones.
const seen = new Set();
const timeout = { enter: 150 };

const measurementCache = new CellMeasurerCache({
  fixedWidth: true,
  minHeight: 109 /* height of event with a one-line event message on desktop */,
});

class SysEvent extends React.Component {
  shouldComponentUpdate(nextProps: SysEventProps) {
    if (this.props.event.lastTimestamp !== nextProps.event.lastTimestamp) {
      // Timestamps can be modified because events can be combined.
      return true;
    }
    if (_.isEqual(this.props.style, nextProps.style)) {
      return false;
    }
    return true;
  }

const { tbInstance, onItemClick, listItemComponent } = tbProps;

    const { items, hasNextPage } = tbInstance.state.list;

    const loadNextPage = args => {
        const pageToLoad = Math.ceil(args.stopIndex / (tbInstance.state.itemsPerPage - 1)) - 1;
        if (tbInstance.state.isLoading || pageToLoad <= tbInstance.state.page) {
            return;
        }

        tbInstance.api.loadPage(pageToLoad);
    };

    // This cache is enabling better performance when it comes to reload
    // previously loaded items.
    const cache = new CellMeasurerCache({ defaultHeight: 85, fixedWidth: true });
    const noRecordsFound = !hasNextPage && !tbInstance.state.isLoading && items.length === 0;

    // We need a place holder to give user some feedback on what's happening
    const itemCount = tbInstance.state.isLoading || noRecordsFound || hasNextPage ? items.length + 1 : items.length;

    const loadMoreItems = loadNextPage;

    // Every row is loaded except for our Loading/NoRecordsFound indicator.
    const isItemLoaded = index => !hasNextPage || index < items.length;

    const ListItemComponent = listItemComponent ? listItemComponent : TbListItem;

    const rowRenderer = (props: any) => {
        const { index, key, style } = props;
        const row = items[index];
        const itemClickProxy = generateOnRowClickProxy(onItemClick)(row);

const getCache = () => {
      if (cacheRef.current === undefined) {
         cacheRef.current = new CellMeasurerCache(
            { fixedWidth: true, minHeight: 10, defaultHeight: 200 });
      }
      return cacheRef.current;
   };
   const cache = getCache();

constructor(props, context) {
    super(props, context);

    this._columnCount = 0;

    this._cache = new CellMeasurerCache({
      defaultHeight: 150,
      defaultWidth: 150,
      fixedWidth: true
    });

    this._columnHeights = {};

    this.state = {
      columnWidth: 150,
      height: 150,
      gutterSize: 5,
      windowScrollerEnabled: true
    };


    this._cellRenderer = this._cellRenderer.bind(this);

public constructor(props: ILogViewerProps) {
    super(props);
    this.cellMeasurerCache = new CellMeasurerCache({
      fixedWidth: true,
      minHeight: 20,
    });
  }

const VirtualBody: React.SFC = (props) => {
  const {
    customData,
    Row,
    height,
    isScrolling,
    onChildScroll,
    data,
    columns,
    scrollTop,
    width,
  } = props;

  const cellMeasurementCache = new CellMeasurerCache({
    fixedWidth: true,
    minHeight: 44,
    keyMapper: (rowIndex) => _.get(props.data[rowIndex], 'metadata.uid', rowIndex),
  });

  const rowRenderer = ({ index, isScrolling: scrolling, isVisible, key, style, parent }) => {
    const rowArgs = {
      obj: data[index],
      index,
      columns,
      isScrolling: scrolling,
      key,
      style,
      customData,
    };
    const row = (Row as RowFunction)(rowArgs as RowFunctionArgs);

didResize() {
    this.cache = new CellMeasurerCache({
      defaultHeight: 30,
      fixedWidth: true
    });
    this.forceUpdate();
  }

getMessagesCache = (id: string, width: number) => {
		const key = this.generateKey(id, width)

		if (this._messages.has(key)) {
			return this._messages.get(key)
		} else {
			const cache = new CellMeasurerCache({
				fixedWidth: true,
				defaultHeight: 33,
				defaultWidth: width
			})
			if (width !== 0) {
				this._messages.set(key, cache)
			}
			return cache
		}
	}

constructor(props) {
    super(props);

    this.cache = new CellMeasurerCache({
      defaultWidth: 100,
      fixedHeight: true,
    });
  }

public itemRenderer: ItemRenderer = (input, renderItem) => {
    const data = Object.values(input);
    const cache = new CellMeasurerCache({
      defaultHeight: 300,
      fixedWidth: true,
    });
    return {
      count: data.length, cache,
      rowRenderer: ({key, parent, index, style}: ListRowProps) =>
        
          <div style="{style}">
            {renderItem(data[index])}
          </div>
        ,
    };
  }