While using stream-browserify to import Transform class and extend it in the code causing the following exception in the browser console

AudioUtils.ts:52 Uncaught TypeError: Class extends value undefined is not a constructor or null
    at Module../src/components/AudioUtils.ts (AudioUtils.ts:52:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/components/TController.ts (TConfig.ts:10:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/components/STT.tsx (AudioUtils.ts:67:1)
    at Module.options.factory (react refresh:6:1)

Here is the snippet of AudioUtils.ts

import { Transform } from 'stream'

export class EncodePcmStream extends Transform {
    _transform(chunk: any, encoding: string, callback: TransformCallback) {
        const buffer = encodePcm(chunk); // encodePcm is a local function
        this.push(buffer);
        callback();
    }
}

Here is the snippet of package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react-dom": "^17.0.2",
    "buffer": "^6.0.3",
    "microphone-stream": "^6.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "stream-browserify": "^3.0.0",
    "typescript": "^4.6.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@types/readable-stream": "2.3.13"
  },
  "type": "module"
}

• I checked most of the questions with similar error here but none of the solutions worked.
• I used dpdm to check circular dependency and there are no circular dependency that it reported.