Bootstrap Modal is Not opening in Multiple Component

Question

I having an CallToActionComponent which is having BS5 Modal and stored into Call Module. I want to access that CTA component into Home and Banner Component which is in Home Module. I have created ModelService and have function of openModal and closeModal still not able to get the result. Attaching the code snippet for the better understanding.

modalservice.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ModelserviceService {

  constructor() { }

  private openModalSubject = new Subject<void>();
  private closeModalSubject = new Subject<void>();

  openModal() {
    this.openModalSubject.next();
  }

  closeModal() {
    this.closeModalSubject.next();
  }

  modalOpen$ = this.openModalSubject.asObservable();
  modalClose$ = this.closeModalSubject.asObservable();
}

calltoaction.ts
export class CalltoactionComponent implements OnInit{

  enquiryForm: FormGroup;

  constructor(
    private snackBar: MatSnackBar,
    private fb: FormBuilder,
    private enquiryService: EnquiryserviceService,
    private modalService: ModelserviceService
  ) {
    this.enquiryForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      fullname: ['', Validators.required],
      requirements: ['', Validators.required],
      mobileno: ['', Validators.required],
    });
  }
openModal(){
    this.modalService.openModal();
  }


  ngOnInit(): void {}
  onSubmit() {
    if (this.enquiryForm.valid) {
      const enquiry = this.enquiryForm.value;
      this.enquiryService.saveInfo(enquiry).subscribe(
        () => {
          this.snackBar.open('', 'Request Send Successfully', {
            duration: 3000,
            verticalPosition: 'bottom',
          });

          // Close the modal using the ModalService
          this.modalService.closeModal();
        },
        () => {
          this.snackBar.open('', 'Error Occurred', {
            duration: 3000,
            verticalPosition: 'bottom',
          });
        }
      );

      this.enquiryForm.reset();
    } else {
      // Form is invalid, display error or take appropriate action.
    }
  }
}

     <div class="text-center p-3">
            <a role="button" class="btn" (click)="openModal()">BOOK A CALL</a>
        </div>
    </div>
<app-calltoaction></app-calltoaction>````


````home.html   
     <div class="text-center p-3">
            <a role="button" class="btn" (click)="openModal()">BOOK A CALL</a>
        </div>`your text`
    </div>
<app-calltoaction></app-calltoaction>````