cdk-virtual-scroll-viewport messes up scrolling

Question

I have faced similar problem like this one https://github.com/angular/components/issues/16330#issuecomment-514591282 , but it happened not only while scrolling but when I tried filtering data. I used templateCacheSize: 0 and it solved the problem of rendering the right data in the right order, but now the scrolling is messed up. Each time I try to scroll with the mouse it jumps right back up to the first element of the array of the data and would not scroll further or when I try to scroll down by clicking on the side panel and pulling it down it just messes up and would not scroll correctly (jumping up and down or staying in one place while I'm trying to scroll). If I delete templateCacheSize: 0 the problem goes away, but then the initial problem appears with data not being rendered correctly after scrolling or filtering.

Virtual scrolling looks like the following in html

                    <cdk-virtual-scroll-viewport itemSize="50" class="oo__virtual-scroll-viewport">
                        <div *cdkVirtualFor="let engine of filteredEngines ; templateCacheSize: 0">
                            <oo-engine 
                                [showPdPsnEsn]="showPdPsnEsn"
                                [hasUserTBOExtensionReadPermission]="hasUserTBOExtensionReadPermission"
                                [toggleValueId]="toggleValueId"
                                [unfoldValue]="unfoldValue"
                                [engine]="engine" 
                                id="{{engine.contractSubsystemSkey}}"
                                (sendChosenEngineToParent)="receiveEngine($event)">
                            </oo-engine>
                        </div>
                    </cdk-virtual-scroll-viewport>

Thanks for any help or advice in advance.