Angular, reactive form nested array access

Question

I have a situation where i have the following Reactive Form structure:

  formGroup: FormGroup = this.fb.group({
    name: ['', Validators.required],
    weight: [1, Validators.required],
    active: true,
    settings: this.fb.array([
     ...
     additionalSettings: FormArray
     ...
     ])
    })
  });

So in the settings formArray there are random pushes happening with formGroups where it has only one FormArray (in this case called "additionalSettings") inside which always has different position in the array. Now finding the key and the array index is fine (it will have fixed object key always). But rendering this nested FormArray on the Html template is hard to resolve. I've tried the following code with no luck, so any help will be appreciated. Thank you.

   <div formArrayName="additionalSettings">
    <div *ngFor="let item of theFormArrayRef.controls; let idx = index;">        
      <div [formGroupName]="idx">
        <input formControlName="name" placeholder="Item name" [value]="item.value.name">
        <input formControlName="placeholder" placeholder="Item name" [value]="item.value.placeholder">
      </div>
    </div>
  </div>

The .ts file:

get theFormArrayRef(): FormArray {
  return this.formGroup.controls['settings'].at(47).controls['additionalSettings'] as FormArray;
  }