z-index : 9999 doesn't work in modal with autocomplete Angular v.15 and Bootstrap v.5

Question

I'm working with Angular v.15 and Bootstrap v.5, but I have a problem with a modal and with a mat-autocomplete

here is my HTML:

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <ng-container>
          <div class="card">
            <div class="card-body">
              <button mat-raised-button class="mat-focus-indicator mat-raised-button mat-button-base btn btn-info"
                data-toggle="modal" data-target="#modal">
                Open Dialog
              </button>
            </div>
          </div>
          <div class="modal fade" id="modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
            role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-contact">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="myModalLabel">Dialog Title</h3>
                  <button mat-button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="material-icons">close</i>
                  </button>
                </div>
                <div class="modal-body">
                  <form #inverterAssociation name="inverterAssociation">
                    <mat-form-field class="example-full-width" appearance="fill">
                      <mat-label>Select</mat-label>
                      <input type="text" matInput [formControl]="formControl" [matAutocomplete]="plantAutoComplete">
                      <mat-autocomplete #plantAutoComplete="matAutocomplete" name="plants" [displayWith]="displayFn"
                        ngDefaultControl (optionSelected)="selectionChanged($event.option.value)">
                        <mat-option *ngFor="let p of filteredPlants | async" [value]="p"> {{p.Name}}</mat-option>
                      </mat-autocomplete>
                      <button type="button" mat-button *ngIf="plant != null" matSuffix mat-icon-button
                        aria-label="Clear" (click)="clearPlant()">
                        <mat-icon>close</mat-icon>
                      </button>
                    </mat-form-field>
                  </form>
                </div>
                <div class="modal-footer justify-content-center">
                  <button mat-raised-button type="button" class="btn btn-info btn-round" data-dismiss="modal"
                    (click)="save()">Save</button>
                </div>
              </div>
            </div>
          </div>
        </ng-container>
      </div>
    </div>
  </div>
</div>

and this is what I tried to do in my .css for showing above the cdk-overlay:

.cdk-overlay-connected-position-bounding-box {
  z-index: 9999 !important;
}

I've also tried to do:

.cdk-overlay-container,.cdk-overlay-backdrop, .cdk-overlay-dark-backdrop, .cdk-overlay-backdrop-showing , .cdk-global-overlay-wrapper, .cdk-overlay-connected-position-bounding-box, .cdk-overlay-pane {
  z-index: 999999 !important;
}

But nothing changed, where am I wrong? Someone could help me?