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

Question

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).