How can I patch a nested form Array?

Question

I have two reactive forms. one form for adding a new 'agreement' and adding 'contacts' to it and the other form shows all the added agreements and contacts and has inline editing (adding/deleting contacts). I can add agreements and contacts in my first form but I have to patch it to the second form upon submission. My first form looks something like this:

formInitializer() {
this.agrmntsForm = this.formBuilder.group({
  sales_price: new FormControl(''),
  closing_cost_support: new FormControl(''),
  financing: new FormControl(''),
  contract_date: new FormControl(''),
  inspection_period: new FormControl(''),
  closing_date: new FormControl(''),
  contacts: this.formBuilder.array([]),
})}

the second form looks something like this :

mainFormInitializer() {
this.mainForm = this.formBuilder.group({
  agreements: this.formBuilder.array([]),
});}

Here's a stackblitz with all the code up to this point: stackblitz

I need to patch all the data coming from the agrmntsForm into the mainForm every time the user adds a new agreement. Currently I can only patch the agreements array but can't seem to figure out how to patch the contacts array.