How to use the '?.' optional chaining in a TypeScript project

Question

When I use the '?.' optional chaining in my project I get the following compiler error:

Error: ./src/app/core/services/AppContainer.ts 141:48
Module parse failed: Unexpected token (141:48)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|       version: data.version,
|       serviceId: data.sId,
>       release: data.release?.version
|     };
|   }

The code in question is data.release?.version which compiles fine in the IDE.

The project uses "typescript": "4.0.5"

My tsconfig.json looks like this:

 {
  "compileOnSave": false,
  "compilerOptions": {
    "esModuleInterop": true,
    "module": "commonjs",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2020",
    "resolveJsonModule": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": [
    "node_modules"
  ],
}