Typescript is not declaring one of the dependency package correctly when compiling my react component library

Question

I'm creating a React component library using pnpm workspaces, nx for monorepo, vite for bundling and typescript for generating types.

I'm trying to expose the types of the main component library which is using a tool that makes all my components polymorphic. However, when I try to compile tsc. for some reason the final declaration of the package is pointing to its internals implementations instead of using the main entry point.

This cause that when I'm using my components in other projects, they're detected as any and losing all the types props.

The problem.

When I compile the @rosepath/react-layout package which uses @rosepath/react-polymorphic-component and the output type of one of the component declaration ended up to be.

import React from 'react';
import { FrameProps } from './types';
declare const Frame: import("@rosepath/react-polymorphic-component/dist/polymorphic-component/polymorphic-component").PolymorphicComponentWithRef<"div", React.PropsWithChildren<FrameProps>>;
export { Frame };

However, this way to resolve the external dependency doesn't seem to work when I use the component in other projects. But if I manually resolve to the package entry point like:

import React from 'react';
import { FrameProps } from './types';
declare const Frame: import("@rosepath/react-polymorphic-component").PolymorphicComponentWithRef<"div", React.PropsWithChildren<FrameProps>>;
export { Frame };

This seems to work perfectly.

My question is: how can I achieve this with Typescript?

Here's the file of my nx.json:

  "extends": "nx/presets/npm.json",
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "nxCloudAccessToken": "secret",
  "targetDefaults": {
    "build": {
      "cache": true
    },
    "lint": {
      "cache": true
    },
    "test": {
      "cache": true
    },
    "e2e": {
      "cache": true
    }
  }
}

Here is the root tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "declaration": true,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "paths": {
      "@rosepath/*": ["packages/*/dist"]
    },
    "removeComments": false,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "strictNullChecks": true,
    "target": "ESNext"
  },
  "exclude": ["node_modules", "packages/**/dist"]
}

Here is the ts files of library component - tsconfig.node.json:

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["vite.config.ts", "types", "../../types"]
}

tsconfig.json:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./dist",
    "downlevelIteration": true,
    "declaration": true,
    "declarationMap": true,
    "jsx": "react",
    "target": "esnext"
  },
  "include": ["./src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

And here's the package.json:

{
  "name": "@rosepath/react-layouts",
  "version": "0.0.41",
  "type": "module",
  "sideEffects": false,
  "scripts": {
    "dev": "vite",
    "build": "vite build && tsc",
    "preview": "vite preview",
    "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",
    "test": "vitest run",
    "test:watch": "vitest",
    "test:coverage": "vitest run --coverage"
  },
  "dependencies": {
    "@rosepath/foundation": "workspace:^",
    "@rosepath/styles": "workspace:^",
    "@rosepath/react-polymorphic-component": "workspace:^",
    "prop-types": "^15.8.1",
    "react-merge-refs": "^2.1.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/node": "^18.13.0",
    "@types/prop-types": "^15.7.5",
    "@types/react": "^18.2.6",
    "@types/react-dom": "^18.2.4",
    "@types/testing-library__jest-dom": "^5.14.5",
    "@vitejs/plugin-react": "^4.0.0",
    "@vitest/coverage-c8": "^0.31.1",
    "jsdom": "^22.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.0.4",
    "vite": "^4.3.8",
    "vite-plugin-dts": "^2.3.0",
    "vitest": "^0.31.1"
  },
  "peerDependencies": {
    "react": "^16.8 || ^17 || ^18"
  },
  "files": [
    "dist",
    "src"
  ],
  "main": "./dist/rose-react-layouts.umd.cjs",
  "module": "./dist/rose-react-layouts.js",
  "types": "dist/react-layouts.d.ts",
  "source": "src/main.tsx",
  "style": "dist/styles.css",
  "exports": {
    ".": {
      "import": "./dist/rose-react-layouts.js",
      "require": "./dist/rose-react-layouts.umd.cjs",
      "types": "./dist/react-layouts.d.ts"
    },
    "./dist/": {
      "import": "./dist/",
      "require": "./dist/"
    }
  },
  "publishConfig": {
    "access": "public"
  }
}

I would really appreciate your help!

Thank you