Angular FormArray not detecting inputs for formcontrols of last element

trying to create a formarray of multiple formgroups, the issue I am facing is kind of strange, the formcontrols present in last element of formarray , is not taking input values

add-modules.ts file

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

/** @title Basic drawer */
@Component({
  selector: 'app-module-new',
  templateUrl: 'app-module-new.html',
  styleUrls: ['app-module-new.css'],
})
export class AppModuleNewComponent {
  moduleForm: FormGroup;

  constructor(private changeDetectorRef: ChangeDetectorRef) {
    this.moduleForm = new FormGroup({
      name: new FormControl('', [Validators.required]),
      description: new FormControl('', [Validators.required]),
      lessons: new FormArray([
        new FormGroup({
          type: new FormControl('lesson'),
          name: new FormControl('', [Validators.required]),
          description: new FormControl(''),
        }),
      ]),
    });
  }
  ngAfterViewChecked(): void {
    this.changeDetectorRef.detectChanges();
  }
  private newLesson() {
    return new FormGroup({
      type: new FormControl('lesson'),
      name: new FormControl('', [Validators.required]),
      description: new FormControl(''),
    });
  }

  addLesson() {
    (this.moduleForm.get('lessons') as FormArray).controls.push(
      this.newLesson()
    );
  }
  getLessonsControl() {
    return (this.moduleForm.get('lessons') as FormArray).controls;
  }

  submitForm() {
    console.log(this.moduleForm);
  }
}

add-module.html

 <div class="container text-grey" style="width: 80%; margin: 0 auto">
  <h1>HELLo</h1>

  <form [formGroup]="moduleForm" (submit)="submitForm()">
    <div>
      <label>Input</label>
      <input type="text" formControlName="name" />
    </div>

    <div>
      <label>Desc</label>
      <input type="text" formControlName="description" />
    </div>

    <div
      formArrayName="lessons"
      *ngFor="let line of getLessonsControl();let i=index "
    >
      Lesson {{i+1}}
      <div [formGroupName]="i">
        <div>
          <label>Name</label>
          <input type="text" formControlName="name" />
        </div>
        <div>
          <label>desc</label>
          <input type="text" formControlName="description" />
        </div>
      </div>
    </div>
    <button type="button" (click)="addLesson()">Add Lesson</button>
    <button type="submit">SUBMIT</button>
  </form>
</div>

so, when I filled inputs of last element of form array, inputs I filled vs the output I get

stackblitz link- https://stackblitz.com/edit/angular-formarray-last-element-bug?file=main.ts

Update the code of you addLesson as follows, instead of pushing the values to controls push directly to formArray.

  addLesson() {
    (this.moduleForm.get('lessons') as FormArray).push(this.newLesson());
  }