Nx -host app and remote app with different path (tsconfig) does not work when running the host app

Question

I have the following arch in the project

.
├── apps
│   ├── access-manager
│   ├── admin
│   ├── calexa
│   └── superadmin
├── .editorconfig
├── .env
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── jest.config.ts
├── jest.preset.js
├── libs
│   ├── .gitkeep
│   └── shared
├── .nx
│   └── cache
├── nx.json
├── package.json
├── package-lock.json
├── .prettierignore
├── .prettierrc
├── README.md
├── tsconfig.base.json
└── .vscode
    ├── extensions.json
    └── settings.json

access-manager -> Host app calexa -> Remote app superadmin -> Remote app admin -> Remote app

Now, inside the tsconfig.base.json (root folder) I have the following

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "resolveJsonModule": true,
    "target": "es2015",
    "module": "esnext",
    "lib": [
      "es2020",
      "dom"
    ],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "calexa/Module": [
        "apps/calexa/src/remote-entry.ts"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "tmp"
  ]
}

and inside the tsconfig of apps/calexa

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "allowJs": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "baseUrl": "../..", // Report errors for fallthrough cases in switch statement
    "paths": {
      "@components/*": [
        "apps/calexa/src/components/*"
      ],
      "@config/*": [
        "apps/calexa/src/config/*"
      ],
      "@services/*": [
        "apps/calexa/src/services/*"
      ],
      "@features/*": [
        "apps/calexa/src/features/*"
      ],
      "@utils/*": [
        "apps/calexa/src/utils/*"
      ],
      "@routes/*": [
        "apps/calexa/src/routes/*"
      ],
      "@models/*": [
        "apps/calexa/src/models/*"
      ],
      "@layouts/*": [
        "apps/calexa/src/layouts/*"
      ],
      "@hooks/*": [
        "apps/calexa/src/hooks/*"
      ],
      "@rtk/*": [
        "apps/calexa/src/rtk/*"
      ],
      "components/*": [
        "apps/calexa/src/components/*"
      ],
      "config/*": [
        "apps/calexa/src/config/*"
      ],
      "services/*": [
        "apps/calexa/src/services/*"
      ],
      "features/*": [
        "apps/calexa/src/features/*"
      ],
      "utils/*": [
        "apps/calexa/src/utils/*"
      ],
      "routes/*": [
        "apps/calexa/src/routes/*"
      ],
      "models/*": [
        "apps/calexa/src/models/*"
      ],
      "layouts/*": [
        "apps/calexa/src/layouts/*"
      ],
      "hooks/*": [
        "apps/calexa/src/hooks/*"
      ],
      "rtk/*": [
        "apps/calexa/src/rtk/*"
      ],
      "@project/*": [
        "libs/shared/*"
      ]
    }
  },
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ],
  "extends": "../../tsconfig.base.json"
}

Now when it comes to run the remote app calexa it runs fine, but when it comes to run the access-manager which is the host app, webpack fails by telling me can not resolve "@models/User"

So how to solve the problem ?