Cannot stop Angular from preventing the routing. CanDeactivate wont work

Question

In my angular project i want the user to warn about leaving the component. I implemented a modal that i want to trigger when the user presses the back button in the browser or uses any other method to leave the site.

I use angular routing to navigate the user and already implemented a CanDeactivate guard.

App-routing:

  {
path: 'waitingroom/:link',
component: WaitingroomComponent,
canDeactivate: [CanDeactivateGuard],
  },

  { path: 'waitingroom/:link', component: WaitingroomComponent },

and in implemented it in my component unfortunatly it does not work properly. Either the websites navigates the user back (the modal pops up for a split seconds but then leaves the site) How can i make this work?

Here is the canDeactivate method:

  canDeactivate(): Observable<boolean> | boolean {
    if (this.isConfirmationModalOpen) {
      // Show your confirmation modal
      // Return false to prevent navigation
      return false;
    }
    // If the modal is not open, allow navigation
    return false;
  }

i already tried to set this.isConfirmationModalOpen to true before or after the if statement but it does not work the component wont stay at the modal to wait for the users joice to leave.

the Can deactivate guard:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
  providedIn: 'root',
})
export class CanDeactivateGuard
  implements CanDeactivate<CanComponentDeactivate>
{
  canDeactivate(
    component: CanComponentDeactivate
  ): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

the method to open the modal:

  confirmationModal() {
    this.isConfirmationModalOpen = true;
  }

and another function that prevent reloading (also does not work properly)

  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any): void {
    this.confirmationModal();
    console.log('Page is being refreshed or closed');
    if (this.isConfirmationModalOpen) {
      $event.returnValue = true;
    }
  }

and here is the modal:

      <!-- Confirmation modal if the admin wants to leave the waiting room -->
      <div *ngIf="isConfirmationModalOpen" class="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
        <div class="bg-white p-4 rounded-lg flex flex-col items-center sm:w-96" (click)="$event.stopPropagation()">
          <p class="text-2xl">The waitingroom will be cancelled if you leave this site!</p>
          <p> Are you sure you wanna leave?</p>
          <div class="flex mx-auto justify-center items-center flex-wrap gap-4 mt-4">
            <button class="w-full sm:w-1/2 mx-0 my-2.5 px-4 py-2 orangeButton text-white rounded hover:bg-blue-600" (click)="cancelWaitingRoom()">Yes</button>
            <button class="w-full sm:w-1/2 mx-0 my-2.5 px-4 py-2 redButton text-white rounded hover:bg-red-600" (click)="closeConfirmationModal()">No</button>
          </div>
        </div>
      </div>

How can i fix this? If you need anymore information i happy to provide them. The component manages a lot of information due to the handling of websocket events and other stuff so posting the hole ts file would only cause confusion.