formArrayName (fb.array) - html getting formControlName (value) wrong by deleting Dice from array

Question

I am trying to remove array from Formbuilder, but by removing the array formControl values inside the input are getting wrong.

product logic
I made an array with three levels being

{
  "fileimg": "",
  "nome": "",
  "descricao": "",
  "vl_venda": "",
  "id_cardapio": "",
  "bo_segunda": "true",
  "bo_terca": "true",
  "bo_quarta": "true",
  "bo_quinta": "true",
  "bo_sexta": "true",
  "bo_sabado": "true",
  "bo_domingo": "true",
  "items": [
    {
      "categoria": "",
      "qtdmin": "",
      "qtdmax": "",
      "bo_obrigatorio": "",
      "complementos": [
        {
          "nome": "",
          "descricao": "",
          "valor": "",
          "bo_pausar": ""
        }
      ]
    }
  ]
}

I am not having problems with product and item, only with complements.

the hierarchy of the formgroup was like this

[formGroup]='formProduto'
    formArrayName="items"  
        [formGroupName]="i"  

        formArrayName="complementos"  
            [formGroupName]="j"

---

When I click the delete button it removes the Formbuilder array, but it mounts ngfor with wrong values, I think formControlName is getting lost.

Stretch where I’m having problems.

<div formArrayName="complementos"
  *ngFor="let complemento of item.controls.complementos.value | keyvalue; let j = index; trackBy:trackByFn">
  <!-- <pre> -->
    <div class="alert alert-secondary" role="alert">
    {{complemento.value | json}}
    </div>
  <!-- </pre> -->
  <div [formGroupName]="j">
    <div>
      <div class="row ">
        <div class='form-group is-empty col-md-3'>
          <label class="control-label" for='nome'>Nome {{complemento.value.nome}}</label>
          <input class='form-control'  [formControlName]="'nome'" placeholder="nome">
        </div>
        <div class='form-group is-empty col-md-4'>
          <label class="control-label" for='descricao'>Descrição</label>
          <input class='form-control' formControlName="descricao" placeholder="descricao">
        </div>
        <div class='form-group is-empty col-md-2'>
          <label class="control-label" for='valor'>Valor</label>
          <input class='form-control'  formControlName="valor" placeholder="valor">
        </div>
        <div class='form-group is-empty col-md-2'>
          <div class="checkbox" style="margin-top:28px">
            <input id="bo_pausar-{{j}}" class="magic-checkbox"
            type="checkbox"  formControlName="bo_pausar">
            <label for="bo_pausar-{{j}}">Pausar</label>
          </div>
        </div>
        <div class='form-group is-empty col-md-1'>
          <p class="cursor-pointer" style="margin-top: 28px;" (click)="deleteComplemento(item.controls.complementos,j)">
            Excluir
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Gif example: https://i.imgur.com/Sflz41a.gif

stackblitz