Displaying dynamic nested formgroup/formarray

I have a formgroup with the following structure:

this.myForm = this.formBuilder.group({
  firstGroup: this._fb.group({
     isEnabled: [false, Validators.required],
     firstArray: this._fb.array([])
  }),
  secondGroup: this._fb.group({
     isEnabled: [false, Validators.required],
     secondArray: this._fb.array([])
  }),
  thirdGroup: this._fb.group({
     isEnabled: [false, Validators.required],
     thirdArray: this._fb.array([])
  }),
  firstName: ['', Validators.required],
  lastName: ['', Validators.required]
})

I have data coming from the backend which I want to populate in the nested formArrays namely firstArray, secondArray, thirdArray

The current approach I have tried is the following:

this.myForm.get('firstGroup.firstArray').setValue(data.firstArray)
this.myForm.get('firstGroup.isEnabled').setValue(data.isEnabled)

But doing this gives the following error:

value.forEach is not a function

I have previously worked with dynamic forms but they were not nested like this. Any help on where I am wrong with this will be greatly appreciated.

createItem() {
  return this.formBuiler.group({
      temp1: [{
          key1: null,
          key2: null,
      }],
      temp2: [{
          key3: null,
          key4: null,
      }],
  })
}

The formarray is an array of objects like given above (this method is called first item to create item for formArray)