Right way to configure webpack

Question

I create test UI-kit react library my

my pakacge.json

{
  "name": "geo_bars_ui_kit_lib",
  "version": "1.0.17",
  "description": "",
  "main": "./dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lib-prod": "webpack --config webpackTest.config.js --mode production",
    "lib-dev": "webpack --config webpackTest.config.js --mode development",
    "npm-pub": "webpack --config webpackTest.config.js && npm version patch &&  npm publish"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^18.2.65",
    "@types/react-dom": "^18.2.22",
    "css-loader": "^6.10.0",
    "file-loader": "^6.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^3.3.4",
    "ts-loader": "^9.5.1",
    "typescript": "^5.4.2",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4"
  },
  "peerDependencies": {
    "react": "*",
    "react-dom": "*"
  },
  "files": [
    "dist"
  ]
}

my tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext", // Изменение module на поддерживаемую опцию
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "lib": ["es2015", "dom"],

    "outDir": "./dist/",
    "sourceMap": true,
    "declaration": true
  },

  "include": ["src", "custom.d.ts"],
  "exclude": ["node_modules", "dist"]
}

my webpack.config.js

const path = require('path')
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: 'production',


    entry: {
        main: './src/index.ts',
        input: './src/components/Input',
        button: './src/components/Button',
        logo: './src/components/Logo'
    },
    output: {
        filename: (pathData) => {
            return pathData.chunk.name === 'main' ? 'index.js' : `components/${pathData.chunk.name}/[name].js`;
        },
        libraryTarget: "umd",
        path: path.resolve(__dirname, 'dist'),
        library: 'my-library-name',
        clean: true
    },

    optimization: {
        // eslint-disable-next-line spellcheck/spell-checker
        minimizer: [new TerserPlugin({
            extractComments: false,
        })],
    },

    module: {
        rules: [
            {
                test: /\.(png|jp(e*)g|svg|gif)$/,
                type: "asset/resource",
                generator: {
                    filename: 'assets/images/[name].[ext]',
                },
            },
            {
                test: /\.(ts|tsx)?$/,
                use: ['ts-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.css/,
                use: ['style-loader', 'css-loader'],
            }
        ]
    },

    resolve: {
        extensions: ['.ts', '.tsx']
    },

    externals: {
        "react": "react",
        "react-dom": "reactDom"
    }
}

I published the package in npm and in other projects after installing modal - I can import components in the following way import {Button} from "geo_bars_ui_kit_lib/dist/components/Button"

my task is to achieve the ability to import components as follows

**import {Button} from "geo_bars_ui_kit_lib/Button"**

please tell me how to configure the webpack configuration to achieve this goal thanks advance!