Unable to use esBuild library with multi entry points

Question

I have x2 packages - app and my-lib

App is a basic react app using webpack 5 and TS 4.6

my-lib is library compiled with esBuild. The goal is to bundle each module within my-lib individually so the consuming app can consume as:

import { Profile } from 'my-lib/profile'

or

import { Account } from 'my-lib/account'

The main purpose of this is so the consuming app does not need to import the whole bundle, but the smaller modules and helps with tree-shaking.

my-lib:

esbuild.js
package.json
tsconfig.json
src
    components
        profile
            profile.tsx
            index.ts
        account
            account.tsx
            index.ts
        ////
        //// more and more 'mini' components
        ////

In each of the above index.ts, the contents is:

export * from './Profile'; 
// Account...

my-lib esbuild.js:

import { globPlugin } from 'esbuild-plugin-glob';

esbuild.build({
  entryPoints: ['src/**/index.ts'],
  outdir: 'dist',
  format: 'esm',
  target: ['es6']
  sourcemap: true,
  plugins: [globPlugin()],
});

my-lib package.json

name: 'my-lib',
main: 'dist/index.js',
types: 'dist/index.d.ts',
exports: {
    profile: './dist/profile/index.js',
    account: './dist/account/index.js'
}

After building the my-lib, i see:

esbuild.js
package.json
tsconfig.json
dist. // <-- result from build
    profile
        profile.d.ts
        index.d.ts
        index.js
    account
        account.d.ts
        index.d.ts
        index.js

src
    components
        profile
            profile.tsx
            index.ts
        account
            account.tsx
            index.ts
        ////
        //// more and more 'mini' components
        ////

app package.json:

{
    ////
    'dependencies': {
        'my-lib': 'file:my-lib'
    } 
}

After running npm install in app, i can see my-lib is installed in node_modules + the contents looks correct.

However in app > src > user.tsx i cannot import from my-lib. I have tried:

import { Profile } from 'my-lib';    
import { Profile } from 'my-lib/profile';    
import { profile } from 'my-lib';    
import { profile } from 'my-lib/profile';

However i am presented with:

Unable to find module 'my-lib' or its type definitions.

Update - adding

my-lib tsconfig

{
  'extends': '../tsconfig.json'
  "compilerOptions": {
    "declaration": true,
    "target": "esnext",
    "lib": ["esnext", "dom"],
    "strict": true,
    "noImplicitAny": false,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "outDir": "lib"
  }
}

app tsconfig:

{
  "compilerOptions": {
    "declaration": false,
    "target": "es6",
    "lib": ["es2015", "es2017", es2018, dom, esnext],
    "noImplicitAny": false,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "outDir": "./dist/out-tsc",
    allowSyntheticDefaultImports: true,
    sourceMap: true,
    resolveJsonModule: true,
    jsx: 'react',
    isolatedModules: true
  }
}