Angular mat select doesn't open to show value

I create a reusable mat select library, on version 14 angular but I have problem my mat-select does not want to open to show me the values.

is it due to NG_VALUE_ACCESSOR ? are there things that have changed in angular material for version 14 angular ?

there is no error in my console.

lib-mat-select.html

<mat-form-field appearance="legacy">
    
      <!-- label -->
      <mat-label>Label</mat-label>
    
      <!-- icon -->
      <mat-icon *ngIf="controler.value && !controler.disabled" (click)="clearInput(); 
        $event.stopPropagation()">
        highlight_off</mat-icon>
    
      <!-- mat-select -->
      <mat-select [formControl]="controler" disableOptionCentering="true" panelClass="panelClass"
        (selectionChange)="onSelectionChange($event)">
    
        <!-- mat-options -->
        <mat-option *ngFor="let item of options | keyvalue" [value]="item.key">
          {{item.value}}
        </mat-option>
    
      </mat-select>
    
    </mat-form-field>

lib-mat-select.ts

@Component({
  selector: 'lib-mat-select',
  templateUrl: './lib-mat-select.component.html',
  styleUrls: ['./lib-mat-select.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => LibMatSelectComponent),
      multi: true,
    },
  ],
})
export class LibMatSelectComponent implements ControlValueAccessor, OnInit {
  @Input() public formControlName: string;
  @Input() public label: string;
  @Input() public placeholder: string;
  @Input() public options: any;

  @Output() public selectionChangeEmitter = new EventEmitter();

  public controler: FormControl;

  constructor(private controlContainer: ControlContainer) {}

  ngOnInit(): void {
    this.initController();
  }

  public onSelectionChange(event) {
    this.selectionChangeEmitter.emit(event);
  }

  private initController() {
    if (this.controlContainer && this.formControlName) {
      this.controler = this.controlContainer.control?.get(
        this.formControlName
      ) as FormControl;
    }
  }

  public clearInput() {
    this.controler.setValue(null);
  }

  // Les méthodes de l'interface ControlValueAccessor qui ne nécessite pas spécialement d'être surchagée
  writeValue(obj: any): void {}

  registerOnChange(fn: any): void {}

  registerOnTouched(fn: any): void {}
}

app.component.html

 <form [formGroup]="form">

  <div class="center-screen">
    <lib-mat-select formControlName="fruits" [options]="fruitList"></lib-mat-select>
  </div>

</form>

app.component.ts

 fruitList: { 1: 'Pomme', 2: 'Orange', 3: 'Framboise'}

  public form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.createForm();
  }

  public createForm() {
    this.form = this.fb.group({
      fruits: null,
    });
  }