canDeactivate in Angular2+ go two step back on second time back press

Question

I have implemented CanDeactive Guard in latest version of Angular2+,

But whenever i click back button of browser, in fist time it let me stay on same page(that's okay), but in second time it go two step back.

this is my code:

@NgModule({
imports: [
    CommonModule,
    RouterModule.forRoot([
      {
        path: 'home',
        component: HomeComponent,
        canDeactivate: [HomeGuard]
      }
    ])
  ],
  declarations: [
    HomeComponent
  ],
  providers: [HomeGuard],
  exports: [RouterModule]
})
export class HomeModule {
}

Home Component

@Component({
  template: '<p>home works!</p>'
})
export class HomeComponent {
  public counter = 2;
}

And HomeGuard

@Injectable()
export class HomeGuard implements CanDeactivate<HomeComponent> {

  canDeactivate(component: HomeComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot,
                nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    component.counter--;
    return component.counter === 0;
  }
}

I just want to go back only one step.