I've been developing a reactive nested form inspired by this YouTube tutorial - https://www.youtube.com/watch?v=DEuTcG8DxUI

Overall, everything is working fine, except for the following error - https://i.sstatic.net/bZHPV.png

Below are my files.

home.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray } from '@angular/forms';
import { MrgformComponent } from '../mrgform/mrgform.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor() { }

  MRGForm: FormGroup = new FormGroup({
    data: new FormArray([])
  });

  ngOnInit(): void {
    this.generateMRGForm();
  }

  generateMRGForm(): void {
    this.MRGForm = new FormGroup({
      data: new FormArray([
        MrgformComponent.addMGRRowItem()
      ])
    })
  }

  submitMRGForm(): void {
    console.log(this.MRGForm.value)
  }

  get dataArray(): FormArray {
    return this.MRGForm?.get('data') as FormArray;
  }

  addRow(): void { }

  removeRow(): void { }
}

home.component.html

<div class="">
    <div
        class="grid grid-cols-6 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
        <div class="text-gray-500 dark:text-gray-400"></div>
        <div class="text-gray-500 dark:text-gray-400"></div>
        <div class="text-gray-500 dark:text-gray-400"></div>
        <div class="text-gray-500 dark:text-gray-400"></div>

        <div>
            <button type="button" (click)="addRow()"
                class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900">Add</button>
        </div>
        <div>
            <button type="button" (click)="removeRow()"
                class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900">Remove</button>
        </div>
    </div>

    <form [formGroup]="MRGForm" (ngSubmit)="submitMRGForm()">
        <app-mrgform *ngFor="let MRGChildForm of dataArray.controls" [MRGChildForm]="MRGChildForm"></app-mrgform>
        <div
            class="grid grid-cols-6 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
            <div class="text-gray-500 dark:text-gray-400"></div>
            <div class="text-gray-500 dark:text-gray-400"></div>
            <div class="text-gray-500 dark:text-gray-400"></div>
            <div class="text-gray-500 dark:text-gray-400"></div>
            <div class="text-gray-500 dark:text-gray-400"></div>
            <div>
                <button type="submit"
                    class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900">Submit</button>
            </div>
        </div>
    </form>
</div>

mrgform.component.ts

import { Component, Input } from '@angular/core';
import { FormGroup, FormArray, FormControl } from '@angular/forms';


@Component({
  selector: 'app-mrgform',
  templateUrl: './mrgform.component.html',
  styleUrls: ['./mrgform.component.css']
})
export class MrgformComponent {

  propertyList: { id: string, pname: string }[] = [
    { id: '', pname: 'Select Property' },
    { id: 'PROP1', pname: 'Prop 1' },
    { id: 'PROP2', pname: 'Prop 2' },
  ];

  groupList: { id: string, gname: string }[] = [
    { id: '', gname: 'Select Group' },
    { id: 'GRP1', gname: 'Group 1' },
    { id: 'GRP2', gname: 'Group 2' }
  ];

  selectedProperty: string = '';
  selectPropertyChangeHandler(event: any) {
    this.selectedProperty = event.target.value;
    console.log('selectedProperty:', this.selectedProperty)
  }

  selectedGroup: string = '';
  selectGroupChangeHandler(event: any) {
    this.selectedGroup = event.target.value;
    console.log('selectedGroup:', this.selectedGroup)
  }

  @Input()
  MRGChildForm: FormGroup = new FormGroup({
    property: new FormControl(''),
    group: new FormControl(''),
    variableName: new FormControl(''),
    minValue: new FormControl(0),
    maxValue: new FormControl(0)
  });

  static addMGRRowItem(): FormGroup {
    return new FormGroup({
      property: new FormControl(''),
      group: new FormControl(''),
      variableName: new FormControl(''),
      minValue: new FormControl(0),
      maxValue: new FormControl(0)
    });
  }

}

mrgform.component.html

<form [formGroup]="MRGChildForm">
    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="py-3 px-6">
                    Propert
                </th>
                <th scope="col" class="py-3 px-6">
                    Group
                </th>
                <th scope="col" class="py-3 px-6">
                    Variable Name
                </th>
                <th scope="col" class="py-3 px-6">
                    Min Value
                </th>
                <th scope="col" class="py-3 px-6">
                    Max Value
                </th>
            </tr>
        </thead>

        <tbody>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <td class="py-4 px-6">

                    <select formControlName="property" (change)="selectPropertyChangeHandler($event)">
                        <option *ngFor="let property of propertyList; index as i" value="{{property.id}}">
                            {{property.pname}}
                        </option>
                    </select>

                </td>
                <td class="py-4 px-6">
                    <select formControlName="group" (change)="selectGroupChangeHandler($event)">
                        <option *ngFor="let group of groupList; index as i" value="{{group.id}}">
                            {{group.gname}}
                        </option>
                    </select>
                </td>
                <td class="py-4 px-6">
                    <input formControlName="variableName" type="text" id="variable-name"
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                </td>
                <td class="py-4 px-6">
                    <input formControlName="minValue" type="text" id="min-input"
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                </td>
                <td class="py-4 px-6">
                    <input formControlName="maxValue" type="text" id="max-input"
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                </td>
            </tr>
        </tbody>
    </table>
</form>

I've searched and experimented with various solutions to fix this issue. However, I believe there's something crucial that I'm overlooking. Any assistance would be greatly appreciated.