cdkVirtualFor doesn't work with FormArray

Question

I have problem with cdkVirtualFor with FormArray. It doesn't generate any items.

My html:

<cdk-virtual-scroll-viewport
  [itemSize]="100"
  class="viewport-container"
  [formArrayName]="'items'"
>
  <div
    *cdkVirtualFor="
    let item of myFormArray.controls;
    let i = index;
    "
    [formGroupName]="i"
  >
    <div
    fxFlex
    fxLayout="row"
    fxLayoutAlign="start center"
    fxLayoutGap="17px"
    >
      <label>
        {{ i + 1 }}
      </label>
      <our-custom-form-field
        fxFlex
        [errorMessages]="validationErrors"
        [formControlName]="'option1'"
      >
        <input
         type="float"
        />
      </our-custom-form-field>
      <our-custom-form-field
        fxFlex
        [errorMessages]="validationErrors"
        [formControlName]="'option2'"
      >
        <input
          type="float"
         />
         </our-custom-form-field>
     </div>
  </div>
</cdk-virtual-scroll-viewport>

The myFormArray is getter

get myFormArray(): FormArray {
    return this.myFormBase?.get('items') as FormArray;
  }

And in this.myFormBase items are simply items: new FormArray([]) Before using cdk-virtual-scroll-viewport it was generated by ngFor, but due to occurrences of really large arrays I need to render some elements onScroll. But I don't know why this doesn't work. Controls exists, they are not nullish and all I see is blank space with size of .viewport-container class.

I tried generate those fields by using simple array with mock values like [1, 2, 3...] and it worked. Just don't know why it doesn't work with FormArray

EDIT: Problem was with myFormArray, when *cdkVirtualFor got it it was null, shortly after it was assigned with value, but cdk already rendered it with null. It worked properly when I passed the FormArray controls asynchronously.