Angular FormControl valueChanges not working using mat-autocomplete

I don't know why my formControl valueChanges is not firing when I try to filter employees data by typing into mat-autocomplete. Here is my component.ts and HTML respectively

myForm: FormGroup;

constructor(
  private formBuilder: FormBuilder,
) {
  this.prepareForm();
}


ngOnInit(): void {
  this.myForm.get('employeeId') ? .valueChanges.subscribe((x) => {
    console.log('Detect changes', x); // Not showing any console messages
  });

  this.filteredEmployees = this.packageBenefitForm.controls.employeeId.valueChanges.pipe(
    startWith(''),
    map((value) => this._filter(value))
  );
}

prepareForm(packageBenefit ? : PackageBenefit): void {
  this.myForm = this.formBuilder.group({
    employeeId: [
      packageBenefit ? packageBenefit ? .employeeId : '',
      Validators.compose([Validators.required]),
    ],
  });
}

and the HTML

<div class="mt-3">
  <mat-form-field class="example-full-width">
    <mat-label>Employee</mat-label>
    <input type="text" matInput formControlName="employeeId" [matAutocomplete]="auto" />
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectEmployee($event)"
      [displayWith]="displayFnEmployee">
      <mat-option *ngFor="let employee of filteredEmployees | async" [value]="employee">
        {{ employee.firstName }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

I've also tried to use this.packageBenefitForm.get('employeeId').valueChanges and still same problem.

Funny thing it's working in Stackblitz but not in my application. Here's the stackblitz demo app