How to create tree-shakable react module? package.json "exports" not working

I'm trying to build a react components library (e.g Buttons, Modals, etc.)

But until now I still cannot figure how to do nested imports

the objective that i want to have is to be able to do this

import Something from '@company/moduleName/Something'

here is my package.json

{
  "name": "@company/moduleName",
  "version": "1.0.0",
  "description": "company's react design system",
  "author": "",
  "license": "",
  "repository": "",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.js",
  "engines": {
    "node": ">=13",
    "npm": ">=7"
  },
  "type": "module",
  "exports": {
    ".": "./dist/index.modern.js",
    "./Button": "./dist/Button.modern.js",
    "./Container": "./dist/Container.modern.js",
    "./Input": "./dist/Input.modern.js",
    "./Modal": "./dist/Modal.modern.js",
    "./Select": "./dist/Select.modern.js",
    "./Separator": "./dist/Separator.modern.js",
    "./Sidebar": "./dist/Sidebar.modern.js",
    "./Tab": "./dist/Tab.modern.js",
    "./TextArea": "./dist/TextArea.modern.js",
    "./theme": "./dist/theme.modern.js",
    "./Typography": "./dist/Typography.modern.js"
  },
  "scripts": {
    "build": "microbundle src/*.js --no-compress --no-sourcemap -f modern,cjs",
    "start": "microbundle src/*.js --no-compress --no-sourcemap -f modern,cjs watch",
    "rename": "cd dist && ren *.modern.js *.js",
    "prepare": "run-s build",
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && npm install && npm run build",
    "deploy": "gh-pages -d example/build"
  },
  "peerDependencies": {
    "react": "^17.0.1",
    "lodash.merge": "^4.6.2",
    "react-icons": "^4.2.0",
    "react-modal": "^3.12.1",
    "react-select": "^4.1.0",
    "styled-components": "^5.2.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.2",
    "env-cmd": "^10.1.0",
    "eslint": "^7.21.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "microbundle": "latest",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "^4.0.3",
    "lodash.merge": "^4.6.2",
    "react-icons": "^4.2.0",
    "react-modal": "^3.12.1",
    "react-select": "^4.1.0",
    "styled-components": "^5.2.1"
  },
  "files": [
    "dist"
  ],
}

currently i'm using microbundle to build everything in the src/ folder. I've added the exports field but it still says this in the example project inside the module

Module not found: Can't resolve '@company/moduleName/Button' in 'E:\Projects\Software\company\moduleName\example\src'

edit

To be clear, the dist folder shows up the correct desired result

-dist
   index.modern.js
   Modal.modern.js
   ...

I've also been able to do this, but this is not the desired output

@company/moduleName/dist/Something.modern

Any help would be greatly appreciated!