мера не работает, когда компонент перемонтируется в реагируемой виртуализации

Question

когда компонент монтируется, реагирующая виртуализация работает, но если он выполняет повторную визуализацию, реактивная виртуализация не работает, то элемент монтируется при прокрутке. не работает правильно.

слышит мой код

  // Default sizes help Masonry decide how many images to batch-measure
  cache:any = new CellMeasurerCache({
    defaultHeight: 250,
    defaultWidth: 200,
    fixedWidth: false,

  });
  // Our masonry layout will use 3 columns with a 10px gutter between
  cellPositioner:any = createMasonryCellPositioner({
    cellMeasurerCache: this.cache,
    columnCount: 6,
    columnWidth: 200,
    spacer: 20,
  });
  cellRenderer = ({index, key, parent, style}:any) => {
    const list:any = this.state.styleFilteration;

    return (
      <CellMeasurer cache={this.cache} index={index} key={key} parent={parent}>

      <this.Text  style={style}  >   
        <this.Image onClick={()=> this.setState({show: true,forDetails: list[index]})}  >
           {list[index].favorite_beers.length == 0 ?
           <this.unFaverit  onClick={(e)=> {e.stopPropagation(); this.fav(list[index].id)}} ><i className="fa fa-heart"></i></this.unFaverit> :
           <this.Faverit onClick={(e)=> {e.stopPropagation(); this.unFav(list[index].id)} } ><i className="fa fa-heart"></i></this.Faverit>}
           </this.Image>
           <this.ImageName >{list[index].title}</this.ImageName>
       </this.Text>

      </CellMeasurer>
    );
  }

и метод рендеринга возвращает

<WindowScroller>
  {({ height, isScrolling, onChildScroll, scrollTop }) => (
    <Masonry
    cellCount={this.state.styleFilteration.length}
    cellMeasurerCache={this.cache}
    cellPositioner={this.cellPositioner}
    cellRenderer={this.cellRenderer}
    height={height}
    width={1300}
    scrollTop={scrollTop}
    isScrolling={isScrolling}
    onScroll={onChildScroll}
    autoHeight
    data={this.state.styleFilteration}
    />
  )}
</WindowScroller>