Angular 13 - Bootstrap datepicker bug visual in material dialog

Question

I try to open a boostrap datepicker inside of MatDialog, and the calendar shows inside of the dialog, so i have to scroll. And nobody wants to scroll.

datepicker inside of matedialog

i tried lots of z-index, on the overlay and ngb-datepicker

<div class="modal-body">
    <div class="row">
        <div class="col">
            <label for="">Tipo documento *</label>
            <select [(ngModel)]="tipo" class="form-select" aria-label="Default select example">
              <option value="{{o}}" *ngFor="let o of this._type.tipo_documento">{{ o }}</option>
            </select>
        </div>
        <div class="col d-flex flex-column">
            <label for="">Vencimiento</label>

            <div class="input-group">
                <input class="form-control" placeholder="dd/mm/yyyy" name="dp" (click)="d.toggle()" [(ngModel)]="model" [autocomplete]="false" ngbDatepicker #d="ngbDatepicker">
                <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
            </div>

            <div>
                <input class="form-check-input" id="checkVencimiento" type="checkbox" [checked]="tieneVencimiento" (change)="onCheckboxChange($event)">
                <label class="form-check-label" for="checkVencimiento" style="padding-left: 7px;">
                    Tiene vencimiento
                  </label>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col">
            <label for="">Archivo *</label>
            <input type="file" class="form-control" (change)="readFile($event)">
        </div>
    </div>
    <div class="row justify-content-end mt-4">
        <div class="col-sm-3">
            <button (click)="cargar()" [disabled]="!tipo || (tieneVencimiento ? !vencimiento : false ) || !file" type="submit" class="btn btn-success m-btn-success m-btn w-100">Cargar</button>
        </div>
    </div>
</div>

This open the modal:

addDocument(id:number) {
    this.dialog.open(ModalComponent, {
      width: '700px',
      height: 'auto',
      panelClass: ['md:w-5/5', 'w-full'],
      ariaLabelledBy: 'modal-basic-title',
      data: {
        viewComponent: {
          component: AddDocumentComponent,
          data: {
            id
          },
        },
        title: 'Adjuntar Documento',
      },
    });
  }

This is ModalComponent:

import { Component, Inject, OnInit, ViewChild } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { DomSanitizer } from '@angular/platform-browser';
import { ModalDirective } from '../../directives/modal.directive';
import { Type } from '@angular/core';

export class viewComponent {
  constructor(public component: Type<any>, public data: any) {}
}

export interface DialogData {
  viewComponent:dyComponent
  title:string,
  data:any,
  buttons:button[],
}

export interface button {
  event:()=>{};
  label:string;
}

export interface dyComponent {
  data: any;
}


@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {


  // buttons : button[] = [];
  title:string = "title";

  @ViewChild(ModalDirective, {static: true}) modalHost!:ModalDirective;

  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData, public sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    // this.buttons = this.data.buttons;
    this.title = this.data.title;
    this.loadComponent()
  }

  loadComponent() {
    const viewContainerRef = this.modalHost.viewContainerRef;
    viewContainerRef.clear();
    this.data.viewComponent;

    const componentRef = viewContainerRef.createComponent<dyComponent>((<any>this.data.viewComponent).component);
    componentRef.instance.data = (<any>this.data.viewComponent).data;
  }

}

I want to shows the datepicker outside of the modal.