Angular CDKScrollable not firing

I cant seem to get the angular CdkScrollable to fire when creating my own div:

<div class="main-section" id="mainsection" #mainsection CdkScrollable>
    <div class="content" style="height: 300px; background-color: red; margin-bottom: 30px; "></div>
    <div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>
    <div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>
    <div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>
    <div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>
    <div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>

</div>

#mainsection {
    height: 400px;
    display: block;
    overflow-y: auto;
}
private onWindowScroll(data: CdkScrollable) {

    const scrollTop = data.getElementRef().nativeElement.scrollTop || 0;
     console.log(scrollTop);
    if (this.lastOffset > scrollTop) {
      console.log('Show toolbar');
    } else if (scrollTop < 10) {
      console.log('Show toolbar');
    } else if (scrollTop > 100) {
      console.log('Hide toolbar');
    }
    this.lastOffset = scrollTop;
  }
ngAfterViewInit() {
console.log('hiiii');
 this.scrollingSubscription = this.scroll
          .scrolled()
          .subscribe((data: CdkScrollable) => {
         
            this.onWindowScroll(data);
          });
  }

https://stackblitz.com/edit/angular-9-material-starter-ykpx6o?file=src%2Fapp%2Fapp.component.ts

Angular directive's selector is case-sensitive, meaning you should use cdkScrollable instead of CdkScrollable.

<div class="main-section" id="mainsection" cdkScrollable>
                                          ^^^^^

Forked Stackblitz