Nested angular reactive form and error with finding control

I want to create a form in Angular which could submit an array of objects.

As a result I want to get such a Json:

order = {
 selectedDays: [{
  meals: [
    {name: 'breakfast',
    selected: false},
    {name: 'dinner',
    selected: false},
    {name: 'supper',
    selected: false}
  ],
  selectedDay: "10/01/2018"
}
]}

However, I'm having some issues with finding a control. I'm receiving this error:

Error: Cannot find control with path: 'selectedDays -> 0 -> meals -> breakfast'

Here is my code:

HTML:

<div class="" [formGroup]="form">
 <button (click)="addNewDay()">Dodaj nowe zamówienie</button><br><br>
  <div class="row" formArrayName="selectedDays">
    <div *ngFor="let day of form.get('selectedDays').controls; let i=index">
      <fieldset>
        <legend><h3>Chosen day : </h3></legend>
          <div [formGroupName]="i">
            <div class="col-md-3">
              <h5>Choose date</h5>
              <mat-form-field >
                  <input matInput formControlName="selectedDate" [matDatepicker]="picker">
                  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                  <mat-datepicker #picker></mat-datepicker>
              </mat-form-field>
            </div>
            <div class="col-md-3" formArrayName="meals">
              <div><mat-checkbox formControlName="breakfast"> breakfast </mat-checkbox> </div>
              <div><mat-checkbox formControlName="dinner"> dinner </mat-checkbox> </div>
              <div><mat-checkbox formControlName="supper"> supper  </mat-checkbox> </div> 
            </div>     
          </div>
      </fieldset>
  </div>
</div>
<button click="submit()">Send order</button>

<pre>Form values: </pre>

And typescript:

export class OrderFormComponent implements OnInit {

public form: FormGroup;
public availableMeals: string[] = [
  "breakfast", "dinner", "supper"
];

order = {
  selectedDays: [
    {
      meals: [
        {name: 'breakfast',
        selected: false},
        {name: 'dinner',
        selected: false},
        {name: 'supper',
        selected: false}
      ],
      selectedDay: "10/01/2018"
    }
  ]
}
  
constructor(private orderService: OrderService,
            private formBuilder: FormBuilder) { 
  this.form = this.formBuilder.group({
    selectedDays: this.formBuilder.array([])
  })
 
  this.setSelectedDays();
}

addNewDay() {
  let control = <FormArray>this.form.controls.selectedDays;
  control.push(
    this.formBuilder.group({
      meals: this.formBuilder.array([]),
      selectedDate: new FormControl((new Date()))
    })
  )
}

setSelectedDays() {
  let control = <FormArray>this.form.controls.selectedDays;
  this.order.selectedDays.forEach(x => {
    control.push(this.formBuilder.group({ 
      meals: this.mapToCheckboxArrayGroup(this.availableMeals),
      selectedDate: x.selectedDay
    }))
  })
}

submit() {
  this.orderService.sendOrder(this.form.value).subscribe(() => {
      console.log("Order added");
    },
    err => {
      console.log('error occurred: ' + err.message);
    }
  );
}

private mapToCheckboxArrayGroup(data: string[]): FormArray {
  return this.formBuilder.array(data.map((meal) => {
    return this.formBuilder.group({
      name: meal,
      selected: false
      });
    }));
  }
}

my Day.ts object:

export interface Day {
    meals: [
        {name: 'breakfast',
        selected: boolean},
        {name: 'dinner',
        selected: boolean},
        {name: 'supper',
        selected: boolean}
    ]
    selectedDay: string;
  }
  

Probably there is something I've missed, however I can't resolve it on my own - I'm pretty new to Angular. I will be grateful for help!