mat-datepicker not working with formArray Angular

Question

I'm working on a dynamic form in Angular. I'm using formArray and one of my field is mat-datepicker it is a formControl of my form. but when I'm trying to select date using date picker it is not working. I don't understand it is a Angular limitation or did I miss something. I'm not getting error for this implementation.

Please check below code snippet or You can visit Stackblitz.

app.component.html

<div class="container-fluid">
    <div class="row">
        <div class="col-6">
            <table class="table table-borderless">
                <thead>
                    <tr>
                        <th scope="col">Date</th>
                        <th scope="col">Quantity</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody [formGroup]="myForm">
                    <tr class="align-middle" *ngFor="let raw of myForm.controls['quantities']?.value; let i=index" formArrayName="quantities">
                        <ng-container [formGroupName]="i">
                            <td>
                                <mat-form-field class="myDate">
                                    <input matInput [matDatepicker]="myDate" formControlName="myDt" placeholder="Select Date">
                                    <mat-datepicker-toggle matSuffix [for]="myDate"></mat-datepicker-toggle>
                                    <mat-datepicker #myDate ></mat-datepicker>
                                </mat-form-field>
                            </td>
                            <td>
                                <input class="form-control rounded-0 border-0 border-bottom" formControlName="myQty" type="number" min="0" placeholder="Enter Qty">
                            </td>
                            <td>
                                <i class="bi bi-trash-fill" (click)="removeRow(i)" style="cursor: pointer;"></i>
                            </td>
                        </ng-container>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <div class="row gx-0">
                                <button type="button" class="col btn btn-secondary text-start rounded-0" (click)="addRow()">
                                    Add new row <span class="float-end">+</span>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-app';
  public myForm!: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      quantities: this.fb.array([])
    });
  }

  ngOnInit() {
    this.addRow();
  }

  addRow() {
    const quantArr = this.myForm.controls['quantities'] as FormArray;

    quantArr.push(this.fb.group({
      myDt: new FormControl(),
      myQty: 0
    }))
  }

  removeRow(formId: any) {
    (<FormArray>this.myForm.controls['quantities']).removeAt(formId);
  }

  onSubmit() {
    console.log(this.myForm.controls['quantities'].value);
  }
}

I tried all the possible solutions but I didn't succeed. I'm expecting dynamic form with mat-datepicker.

UPDATE: Finally I got solution for my problem from @Eliseo. Please refer comments below.

Thank You!!