Cannot find namespace 'ZenObservable' issue with aws-appsync-subscription-link in AWS AppSync JavaScript SDK

ISSUE WITH aws-appsync-subscription-link package in AWS AppSync JavaScript SDK.

I am using the Apollo client v3.x along with aws-appsync-auth-link and aws-appsync-subscription-link packages in an Angular v12+ project.

I am trying to upgrade Apollo Client from v2.6 to v3.x. While doing so I had to upgrade aws-appsync-auth-link and aws-appsync-subscription-link packages too to their latest version. Below is my current package.json:

{
  "name": "test-apollo-client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "12.2.0",
    "@angular/cdk": "12.2.0",
    "@angular/common": "12.2.0",
    "@angular/compiler": "12.2.0",
    "@angular/core": "12.2.0",
    "@angular/forms": "12.2.0",
    "@angular/localize": "12.2.0",
    "@angular/platform-browser": "12.2.0",
    "@angular/platform-browser-dynamic": "12.2.0",
    "@angular/router": "12.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2",
    "@apollo/client": "^3.5.10",
    "aws-appsync-auth-link": "^3.0.7",
    "aws-appsync-subscription-link": "^3.0.10",
    "graphql": "15.6.0",
    "zen-observable-ts": "^1.1.0",
    "@types/zen-observable": "^0.5.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "12.2.6",
    "@angular/cli": "12.2.6",
    "@angular/compiler-cli": "12.2.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "4.2.3"
  }
}

When trying to do ng build I am getting below errors:

Error: node_modules/aws-appsync-subscription-link/lib/subscription-handshake-link.d.ts:18:71 - error TS2503: Cannot find namespace 'ZenObservable'.  

18     connectNewClients(connectionInfo: MqttConnectionInfo[], observer: ZenObservable.Observer<FetchResult>, operation: Operation): Promise<any[]>; 
                                                                         ~~~~~~~~~~~~~


Error: node_modules/aws-appsync-subscription-link/lib/subscription-handshake-link.d.ts:19:68 - error TS2503: Cannot find namespace 'ZenObservable'.  

19     connectNewClient(connectionInfo: MqttConnectionInfo, observer: ZenObservable.Observer<FetchResult>, selectionNames: string[]): Promise<any>;  
                                                                      ~~~~~~~~~~~~~


Error: node_modules/aws-appsync-subscription-link/lib/subscription-handshake-link.d.ts:20:67m - error TS2503: Cannot find namespace 'ZenObservable'. 

20     subscribeToTopics<T>(client: any, topics: string[], observer: ZenObservable.Observer<T>): Promise<unknown[]>;
                                                                     ~~~~~~~~~~~~~


Error: node_modules/aws-appsync-subscription-link/lib/subscription-handshake-link.d.ts:21:63 - error TS2503: Cannot find namespace 'ZenObservable'.  

21     subscribeToTopic<T>(client: any, topic: string, observer: ZenObservable.Observer<T>): Promise<unknown>;
                                                                 ~~~~~~~~~~~~~


Error: node_modules/aws-appsync-subscription-link/lib/types/index.d.ts:75:15 - error TS2503: Cannot find namespace 'ZenObservable'.

75     observer: ZenObservable.SubscriptionObserver<any>;

A sample Angular v12 app is created in https://github.com/wildbsiu/testing-aws-appsync-subscription-link-issue to reproduce the issue. Run ng build command to reproduce the error(s).