Searched all the old questions from stackoverflow regarding this but Couldn’t get rid of this error.. Anyone pls look at my code and give me the solution

Error : “canActivate in type AuthGuard is not assignable to same property in base type CanActivate”

Authgurad.service.ts

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
import { Observable } from "rxjs";
import { Injectable } from '@angular/core';
import { AuthService } from './auth-service';
import { Router } from '@angular/router';


@Injectable()
export class AuthGuard implements CanActivate {
  authenticated!: boolean;
  constructor(private auth: AuthService, private router: Router) { }
  canActivate(route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | undefined> | Promise<boolean | undefined> | boolean | undefined {
    return this.auth.isAuthenticated()
      .then(
        (authenticated) => {
          if (authenticated) {
            return true;
          }
          else {
            //this.router.navigate(['/']);
            return false;
          }
        }
      );
  }


}

Thanks in advance