Why Does property remain undefined in provider service

Question

I am using ng-boostrap and implementing a custom provider for the DateAdapter :

https://ng-bootstrap.github.io/#/components/datepicker/api#NgbDateAdapter

so I did In my module :

  providers: [
    { provide: NgbDateAdapter, useClass: NgbDateCustomAdapter },
  ],

Now, I want to assign a timezone to the my adapter so the code looks like this :

@Injectable()
export class NgbDateCustomAdapter extends NgbDateAdapter<Date> implements OnDestroy {
  private timezone: Timezone = Timezone.ASIA_SINGAPORE;
  private subscriptions = new SubSink();

  bindTimezone(timezone$: Observable<Timezone>) {
    this.subscriptions.add(
      timezone$.subscribe((tz) => {
        this.timezone = tz;
      })
    );
  }

  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }

  override fromModel(date: Date | null) {
    return date instanceof Date && !isNaN(date.getTime())
      ? { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() }
      : null;
  }

  override toModel(date: NgbDateStruct) {
    return date
      ? zonedTimeToUtc(
          set(new Date(), {
            year: date.year,
            month: date.month - 1,
            date: date.day,
            hours: 0,
            minutes: 0,
            seconds: 0,
            milliseconds: 0,
          }),
          DateUtils.timezones[this.timezone || Timezone.ASIA_TOKYO]
        )
      : null;
  }
}

In App Component I do the following :

  constructor(
    private ngbDateCustomAdapter: NgbDateAdapter<Date>,
  ) {
    (this.ngbDateCustomAdapter as NgbDateCustomAdapter).bindTimezone(
      this.store.pipe(select(getSelfTimezone))
    );

I tried to use NgbDateCustomAdapter but it say there is no provider, so I kind of glitched like this.

Now, if I log inside my subscription, I will see the correct timezone, but the timezone inside toModel is always the default one.

I know something is wrong with my code, but I don't see what.