Angular Modal Error-cannot read properties of undefined (reading ‘classList’) –

I am trying to call modal from my cardetails page
normla modals didnt fit for me and i used angular ngb bootstrap modal
Modal opens when i click open button

BUT
it gives error no the console.
error at console: picture

Actually there are two modals at different pages and they have different component ts code but they give same error.
IT is not related with html code .

this is cardetails.html where is modal .open button is located(at the bottom)

<div class="card" style="width:100%;margin-top: 20px;">

  <div class="row"style="max-height: 80%;">

  </div>
    <carousel  style="height:95%; width: 100%;" >
      <slide *ngFor="let imagePath of carImagePaths; let index=index" >
        <img [src]="imageUrl+imagePath" alt="image slide"class="image-fluid" style=" height:400px;width: 100%; object-fit: cover">
    
        <div class="carousel-caption">
          <h4>Görsel: {{index+1}} </h4>
          <p></p>
        </div>
      </slide>
    </carousel>
  


      <!-- car detail sayfası araç detay bilgileiri -->
      <div *ngFor="let car of cars" class="card-body">
        <div class="card-body detailsFontInfo">

            <h5 class="card-title">
            {{ car?.brandName }} || {{ car?.modelName }}
            </h5>
            
        </div>
    
        <ul class="list-group list-group-flush  detailsFontInfo">
            <li class="list-group-item"><b>Renk :</b> {{ car?.colorName }}</li>
            
            <li class="list-group-item  detailsFontInfo"> <b>Model Yılı :</b> {{ car?.modelYear }}</li>

            <li class="list-group-item  detailsFontInfo"> <b>Günlük Fiyat :</b> {{ car?.dailyPrice | currency: "USD":true:"1.2-2" }}</li>

            <li class="list-group-item  detailsFontInfo"><b>Açıklama:</b> {{ car?.description }}</li>
            <li class="list-group-item  detailsFontInfo"><b>Kira Durumu :</b> {{ car?.isRentable ? "Uygun Değil" : "Müsait" }}</li>


           
            <!-- <b>Status : </b> {{ carDetail?.isRentable ? "Available" : "Not Available" }} -->
            
        </ul>
    </div>
    <!-- alt butonlar -->
    <div style="margin-bottom: 4%;">
      <div class="row">
        <div class="btn-goback col-md-2 offset-md-8">
          <button style="width: 100%;" routerLink="/cars" type="button" class="btn btn-outline-dark">
            Geri Dön
          </button>
        </div>


          <!-- giriş yapılmamışsa giriş yap -->
        <div class="col-md-2"*ngIf="!isAuthenticated()">
            


            <!-- burada modal çıksın ve desin ki kiralayabilmek için kayıt olun veya giriş yapın -->
            <button (click)="openLoginModal()" style="width: 100%;" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#carDetailIsAuthModal">
              Kirala
            </button>
        </div>


        <!-- giriş yapılmamışsa rentala git -->

        <div class="col-md-2" *ngIf="isAuthenticated()">
          <!-- eğer giriş yapılı ise kirala butonuna bassın RENT MODAL GELSİN  -->

          <button (click)="openRentalModal()" style="width: 100%;" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#carDetailsRentalModal">
            Kirala
            
          </button>
          
       </div>

      </div>
    

      
</div>

this is cardetails.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CarDetails } from 'src/app/models/carDetails';
import { CarImage } from 'src/app/models/carImage';
import { CarImageService } from 'src/app/services/car-image.service';
import { CarService } from 'src/app/services/car.service';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { NonNullAssert } from '@angular/compiler';
import { LoginComponent } from '../login/login.component';
import { RentalComponent } from '../rental/rental.component';
import { RentalService } from 'src/app/services/rental.service';

@Component({
  selector: 'app-cardetail',
  templateUrl: './cardetail.component.html',
  styleUrls: ['./cardetail.component.css']
})
export class CardetailComponent implements OnInit {
  //carDetail:CarDetails[]= [];
  cars: CarDetails[] = [];
  carImagePaths:string[] = [];
  carDetail: CarDetails;
  dataLoaded = false;
  imageUrl:string="https://localhost:44396/Uploads/images/"
  //--for rental
  
 
  
  
  carImages:CarImage[]=[];//slider için

  constructor(private carImageService: CarImageService,
    private carService: CarService,
    private activatedRoute: ActivatedRoute,
    public modalService:NgbModal,
    private rentalService:RentalService,
    ) { }

  ngOnInit(): void {


    this.activatedRoute.params.subscribe(params => {//car id verilirse ki arabaya tiklayinca verilmis olur: icerdeki emthodlari calistir

      if(params['carId']){
          this.getCarsDetailsByCarId(params['carId'])
         // this.getImagesByCarId(params['carId'])

        }
    })

    
  }

 
  




  getCarsDetailsByCarId(carId: number){//details sayfamızdaki araç detaylarını çekiyor
    this.carService.getCarsDetailsByCarId(carId).subscribe((response)=>{
      this.cars=response.data
      this.carDetail = response.data[0];//sıfırıncı eement bilgilerin olduğu kısım,sonra mesaj felan geliyor
      
      this.carImagePaths=this.carDetail.imagePath
      this.dataLoaded = true;

    })
  }

  // geçici olarak login li isAuthenticated:true/false mutlaka sil bunu sonra
  isAuthenticated(){
    return false
  }
    
  openLoginModal() {//LOGİN MODAL ı açar (cardetailhtmldeki buton)
    let modalRef=this.modalService.open(LoginComponent)
  }
  openRentalModal(){
    let modalRef= this.modalService.open(RentalComponent)
    //buraya tıkalyınca hem rentala gitmeli
    
  

  }
  
  

  
}

MODALS HTML İS EMTY OR FULL DOESNT MATTER SAME ERROR

MODALS TS

import { Component, OnInit } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

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

  constructor(public modal:NgbActiveModal) { }

  ngOnInit(): void {
  }

}

Any ideas might help