Calling endpoint for fromControl from FormArray and got 500, 400 or 404 errors randomly

I have a formArray that holds a formGroup. For one formControl I need to call an endpoint and populate it with the data.

In my component:

ngOnInit() {
  this.service.getInitialData().pipe(take(1)).subscribe(result => {
    this.form = this.service.populateGroup(result);
  });
}

In my service:

 public populateGroup(items: any[]) {
    return this.formBuilder.group({
      items: this.formBuilder.array(
        this.populateArray(items)
      ),
    });
  }

  private populateArray(items: any[]) {
      return items.map((item: any) => this.populateGroupInsideArray(item));
  }

  private populateGroupInsideArray(item: any) {
    return this.formBuilder.group({
      id: this.formBuilder.control(item.id),
      parameters: this.createParametersGroup(item)
      }),
    });
  }

  private createParametersGroup(item: any): FormGroup {
    const group = this.formBuilder.group({});

    of(item)
      .pipe(
        concatMap((item: any) =>
          this.endpointService.getParameters(item.name)
        )
      )
     .subscribe((result) => {

        Object.keys(module).forEach((key) => {
          group.addControl(key, this.formBuilder.control(result.param);
        });
    })

    return group;
  }

I thinks is something wrong with this piece of code:

 of(item)

because item is just an object that comes one by one for each iteration.

My error is that I have 500, 400 or even 404 errors randomly. If I call the endpoint for each item manually it works fine. I think is something wrong with my code, but I don't know how to fix it.

Many thanks!