Annotation not visible in ng2-pdfjs-viewer?

Question

I'm integrating ng2-pdfjs-viewer in my Angular17 project. It's a great choice for my use case since I also need to use another library for annotation (Highkite/PDFAnnotate), and that library works with pdf.js. ng2-pdfjs-viewer exposes pdf.js and makes that possible.

I've got the basic viewing and annotating part working with both libraries so far. However, what's strange is when an annotation is created (by clicking the button "Add Square Annotation"), it's not visible in the ng2-pdfjs-viewer. In the image attached, ng2-pdfjs-viewer is shown on the left side. As you can tell from the console, the square yellow annotation is indeed created and shown under the "annotationFactory", however it's nowhere to be found in the viewer itself. On the right hand, it's the exact same file downloaded from ng2-pdfjs-viewer on the left after the annotation is created, and opened by Edge or other browsers, and we can clearly see the yellow square in there.

Is there some setting in ngs-pdfjs-viewer like "annotation layer on/off"? Or what else may cause this? Any help is appreciated!

Below is my code for reference. Also, a sample file with annotation (not visible in ng2-pdfjs-viewer but visible in other viewers/browser) is hosted here if that helps testing - https://file.io/0xGMtRIHlLR2

App.component.html/ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { PdfJsViewerComponent, PdfJsViewerModule } from 'ng2-pdfjs-viewer';
import {AnnotationFactory} from 'annotpdf';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule, 
    RouterOutlet,
    PdfJsViewerModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
  title = 'test-ng2pdfjsviewer';

  @ViewChild('pdfViewer') pdfViewerComponent!: PdfJsViewerComponent;
  private pdfjsViewerApp: any; 
  private annotationFactory!: AnnotationFactory;

  ngOnInit(): void {}
  
  onDocumentLoad() {
    this.pdfjsViewerApp = this.pdfViewerComponent.PDFViewerApplication;
    if (this.pdfjsViewerApp) {
      let data1 =  this.pdfViewerComponent.PDFViewerApplication.pdfDocument.getData();
      this.pdfViewerComponent.PDFViewerApplication.pdfDocument.getData().then((data: Uint8Array) => {
        this.annotationFactory = new AnnotationFactory(data);
      });
    } else {
      console.error('PDFViewerApplication is not available');
    }
  }

  addSquareAnnotation() {
    console.log("button clicked")
    const pageNumber = 0; // Assuming we're adding to the first page (page numbers are zero-based index)
    const x = 72;
    const y = 720;
    const size = 50;
    const content = "A Square Annotation";
    const author = "Author Name123";
    const color = { r: 0, g: 0, b: 0 }; // Black color
    const fill = { r: 255, g: 255, b: 0 }; // Yellow fill

    this.annotationFactory.createSquareAnnotation(
      pageNumber,
      [x, y, x + size, y + size],
      content,
      author,
      color,
      fill
    );

    console.log("annotationFactory:", this.annotationFactory)
    this.annotationFactory.download()
  }

  addTextAnnotation() {}
}

<h1>
  {{ title }}
</h1>
<div style="height: 600px">
  <ng2-pdfjs-viewer
    #pdfViewer
    pdfSrc="/assets/pdfs/sample_wAnnot.pdf"
    (onDocumentLoad)="onDocumentLoad()"
  ></ng2-pdfjs-viewer>
</div>
<button (click)="addSquareAnnotation()">Add Square Annotation</button>
<button (click)="addTextAnnotation()">Add Text Annotation</button>