React-virtualized Cellmeasurer defaulting to 'minHeight' of the CellMeasurerCache

I'm using a react-virtualized List component, which uses height data from CellMeasurerCache:

const cache = new CellMeasurerCache({fixedWidth: true, rowHeight: 150, minHeight: 50 });

This is the code for the list:

return (
  <div className={classes.maxHeight}>
    <AutoSizer>
      {({height, width}) =>
        <List
          className='List'
          height={height}
          width={width}
          overscanRowCount={5}
          rowCount={content.length}
          rowHeight={cache.rowHeight}
          rowRenderer={listRowRenderer(content)}>
        </List>
      }
    </AutoSizer>
  </div>);

The problem is that, sometimes the height is defaulting to minHeight, and i want it to use the actual computed height

See this image , the two cards have a default height of 50, when they should have a computed height based on their content. If I scroll down and back up, they will be computed properly, so should this be forced somehow or...?

The listRowRenderer:

const item = data[index];

return (
  <CellMeasurer
    cache={cache}
    columnIndex={0}
    key={key}
    rowIndex={index}
    parent={parent}>
    {({measure, registerChild}) =>
      <div ref={registerChild} style={style}>
        (content here)
      </div>
    }
  </CellMeasurer>
);

I even tried using the measure from CellMeasurer inside useEffect of the card component

Turns out it's not okay to use 1 cache in multiple locations. I had an UI with 3 tabs, each tab loading virtualized data, and each tab used the same cache which messed things up. I gave each tab it's individual cache and voila it worked.