I've tried to implement a reactive form with formArray in angular17. I encountered this issue when you removed one item from the formArray from the top or from the middle.
here's the stackbiz for the issue reproduction.
reproduction path:

put some values in the film fields.
click the add film button to add another film to the form.
put some other values in the newly added film fields.
click on the remove film button under the first film fields.
observe the values in the film fields, the removed film field values are still showing on the dom. but in the below json where I display the form values are updated correctly.

I try to use ApplicationRef.tick(), ChangeDetectorRef.detectChanges(), and updateValueAndValidity() as other similar issues suggested, but no luck. try to use trackBy, but it doesn't do the trick also. Can someone tell me what I'm doing wrong here?
import { CommonModule } from '@angular/common';
import { ApplicationRef, ChangeDetectorRef, Component } from '@angular/core';
import {
  FormArray,
  FormBuilder,
  FormControl,
  FormGroup,
  ReactiveFormsModule,
} from '@angular/forms';

@Component({
  selector: 'app-add-vehicle',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './add-vehicle.component.html',
  styleUrl: './add-vehicle.component.scss',
})
export class AddVehicleComponent {
  constructor(
    private fb: FormBuilder,
    private appRef: ApplicationRef,
    private cdr: ChangeDetectorRef
  ) {}

  addVehicleForm = this.fb.group({
    make: [''],
    model: [''],
    year: [''],
    films: this.fb.array([this.createFilmFormGroup()]),
  });

  createFilmFormGroup(): FormGroup {
    return this.fb.group({
      title: [''],
      releaseDate: [''],
      url: [''],
    });
  }

  get films(): FormArray {
    return this.addVehicleForm.get('films') as FormArray;
  }

  addFilm() {
    this.films.push(this.createFilmFormGroup());
  }

  removeFilm(index: number) {
    this.films.removeAt(index);

    this.addVehicleForm.reset(this.addVehicleForm.value);

    // not working
    // this.addVehicleForm.updateValueAndValidity();

    // not working
    // this.appRef.tick();

    //not woorking
    // this.cdr.detectChanges();
  }
}

<div>
  <h1>Add Vehicle</h1>
  <form [formGroup]="addVehicleForm">
    <div class="form-group">
      <label for="make">Vehicle Make</label>
      <input
        type="text"
        class="form-control"
        id="make"
        formControlName="make"
      />
    </div>
    <div class="form-group">
      <label for="model">Vehicle Model</label>
      <input
        type="text"
        class="form-control"
        id="model"
        formControlName="model"
      />
    </div>
    <div class="form-group">
      <label for="ManufactureYear">Manufacture year</label>
      <input
        type="text"
        class="form-control"
        id="ManufactureYear"
        formControlName="year"
      />
    </div>

    <div style="border: 1px solid black; border-radius: 10px; padding: 10px">
      <div formArrayName="films">
        @for (film of films.controls; track $index) {
        <div
          [formGroupName]="$index"
          style="
          border-bottom: 1px solid #222;
          padding: 10px;
          margin-bottom: 10px;
        "
        >
          <input type="hidden" name="id" formControlName="id" />
          <div class="form-group">
            <label [for]="'title' + $index">Title</label>
            <input
              type="text"
              class="form-control"
              [id]="'title' + $index"
              formControlName="title"
            />
          </div>
          <div class="form-group">
            <label [for]="'releaseDate' + $index">Release Date</label>
            <input
              type="text"
              class="form-control"
              [id]="'releaseDate' + $index"
              formControlName="releaseDate"
            />
          </div>
          <div class="form-group">
            <label [for]="'url' + $index">URL</label>
            <input
              type="text"
              class="form-control"
              [id]="'url' + $index"
              formControlName="url"
            />
          </div>
          <button type="button" (click)="removeFilm($index)">
            Remove Film
          </button>
        </div>
        }
      </div>
      <button type="button" (click)="addFilm()">Add Film</button>
    </div>
  </form>

  <pre>
  {{ addVehicleForm.value | json }}
</pre
  >
</div>