Rendering Dynamic Array - Angular

Question

I am trying to render a dynamic array in my HTML, every click on ("+") it generates a new item in Formarray.

The new fields are being generated in the correct way, but when adding a file its name is not displayed (continues "No selected file").

I believe this is because when updating the information of Formarray it renders Formarray again, keeping the information but not displaying in HTML the name of the file.

Does anyone have any idea of a solution to this problem?

protocol.componentts.

  filterForm = new FormGroup({
   IdProtocolo: new FormControl(),
   Documentos: this.formBuilder.array([ this.createItem() ]);

  ngOnInit() {
    this.items = this.filterForm.get('Documentos') as FormArray;
  }

  createItem(): FormGroup{
    return this.formBuilder.group({
      filename: '',
      filetype: '',
      value: ''
    })
  }
  
  addItem(){
    this.items.push(this.createItem());
  }

  removeItem(index){
    if(this.items.length > 1) {
      this.items.removeAt(index);
    }
  }
  
  onFileChange(event: any, index: any) {

    if(event.target.files && event.target.files.length > 0) {
      let file = event.target.files[0];
        this.items.at(index).patchValue({
          filename: file.name,
          filetype: file.type,
          value: (reader.result as string).split(',')[1]
        })
    }
  }

protocol.component.html

<div *ngFor="let item of filterForm.value.Documentos; let i = index;">
  <div class="row" style="margin-bottom: 10px;">
      <div class="col-md-4">
        <input type="file" formControlName="Documentos" (change)="onFileChange($event, i)">
      </div>
      <div class="col-md-8">
        <button class="btn btn-success-tce" (click)="addItem()">+</button>
        <button class="btn btn-success-tce" (click)="removeItem(i)"style="margin-left: 5px">-</button>
      </div>
  </div>
</div>