How to iterate multiple checkboxes with *ngFor using Form Array([]) and data from API

I have dynamic checkbox that get data from API, following is html file

html :

<pre></pre>
<form [formGroup]="form" (ngSubmit)="submit()">
  <label formArrayName="summons" *ngFor="let summon of summons.items; let i = index">
    <input type="checkbox" [formControlName]="i">
      <span>
       
      </span>
  </label>

  <br>
  <button [disabled]="!form.valid">submit</button>
</form>

it will create multiple checkbox based on items in test.json,(if items consist of 2 items it will produce 2 checkbox) I had succesfully iterate all data in html file but I cant produce checkbox and display the data, I call data from API which in my ts file

ts file :

export class AppComponent implements OnInit  {

  form: FormGroup;
  summons = [];

    constructor(private formBuilder: FormBuilder,
    private inquiryService: InquiryService) {

    this.form = this.formBuilder.group({
      summons: new FormArray([])
    });
  }

  ngOnInit() { 
    this.getSummons();
  }

  getSummons() {
    this.inquiryService.getData().subscribe(summons => {
      this.summons = summons;
      this.addCheckboxes();
      console.log(summons);
    });
  }

   addCheckboxes() {
    const control = new FormControl();
    const formArray = this.form.controls.summons as FormArray;
    formArray.push(control);
  }
}

I also had created stackblitz demo for this questions, also I had follow this tutorial, I need to solve how to iterate checkbox based on API in FormArray and it should display the data, need advice and guide

expected output :