How to data bind to a Form Group within a Form Array? Angular

I am trying to make an Angular Forms app that allows the user to input some information. The user will be required to fill basic information and add two sets of skills to the form at a time and add these are stored in array..

HTML:

<div class="form-container">
  <form (ngSubmit)="submit()" [formGroup]="myForm">
    <h1>User Registration</h1>
    <div class="form-group">
      <label for="firstname"></label>`
      <input type="text" name="firstname" formControlName="name" />
      <input type="text" name="firstname" formControlName="email" />
      <div formArrayName="skills">
        <ng-container *ngFor="let skill of skillsArray.controls; index as i">
        <div formGroupName="skills">      
          <input
            type="text"
            name="firstname"
            placeholder="my skill"
            formControlName="name"
            formControlName="first_skill"
          />
          <input
          type="text"
          name="firstname"
          placeholder="my skill"
          formControlName="name"
          formControlName="second_skill"
        />
        </div>
          <button (click)="addSkills()">Add Skills</button>
        </ng-container>
      </div>
      <button type="submit">Submit</button>
    </div>

    <br />
<div class="form-check">


    {{ myForm.value | json }}
    <br />
    {{ myForm.valid | json }}
</div>
  </form>
</div>

TS:

export class FormCompComponent implements OnInit {
  myForm!: FormGroup;

  constructor (private fb : FormBuilder) {

  }

  ngOnInit(): void {
    this.myForm = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', Validators.required),
      skills: new FormArray([
        new FormGroup({
          first_skill: new FormControl('', Validators.required),
          second_skill: new FormControl('', Validators.required),

        })
      ]),
    });

  }



  addSkills() {
    this.skillsArray.push(new FormControl('', Validators.required));
  }

  get skillsArray() {
    return this.myForm.get('skills') as FormArray;
  }

  submit() {
    console.log(this.myForm.value);
  }
}

 

From an interface perspective, everything is okay, I am able to add items to the array successfully but I am struggling to bind my input to my typescript objects

These are my results when inputting:

{ "name": "test", "email": "test", "skills": [ { "first_skill": "", "second_skill": "" }, "" ] }

How do i penetrate the nested objects from my HTML?

I am currently looping over the array and then attempting to access formGroupName.

My inputs register as blank. why is this?

Thanks,