How to propperly build react modular library

I'm trying to create a react components library which is based on Typescript and SASS. The components library will be used in multiple other typescript projects, so type exports are needed as well. Ideally I want to mimic something like "Material-UI"/"React-Bootrap" libraries dist output solutions.

Example project structure:

|Tabs
+--Tabs.tsx
+--Tabs.scss 
+--index.tsx
index.tsx

index.tsx

export { Tabs } from './Tabs/Tabs';

Tabs/index.tsx

import React from 'react';
import './Tabs.scss';

interface TabsProps {
    ...
}

export const Tabs: React.FC<TabsProps> = (props) => <div>...</div>

Tabs/index.tsx

export { Tabs } from './Tabs';

Expected built dist structure should mimic the src structure:

|Tabs
+--Tabs.js
+--Tabs.d.ts
+--index.js
+--index.d.ts
index.js
index.tsx

I tried analyzing open source projects and see how they are building the libraries, however I could not find libraries using the same approaches that I could reuse.

The solutions I've tried:

Webpack: While I could compile typescript and sass files the webpack would always emit only one file specified in the output section, which usually would be bundled and I would loose the ability to import single component from a specific component's module. I know I can specify multiple entry points, but the project will be having a lot of exports and manually specifying them is not an option...

Example config I tried:

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
    entry: './src/index.tsx',
    module: {
        rules: [
            // sass-loader is not used here yet, but should be once desired structure can be reached
            {
                test: /\.tsx?$/,
                loader: 'babel-loader',
            },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
        plugins: [
            new TsconfigPathsPlugin({ configFile: "./tsconfig.build.json" })
        ]
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
};

Rollup: Similar situation as webpack

Example config that I tried:

// rollup.config.js
import babel from 'rollup-plugin-babel';
import sass from 'rollup-plugin-sass';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

import react from 'react';
import reactDom from 'react-dom';

const babelOptions = {
    exclude: /node_modules/,
    // We are using @babel/plugin-transform-runtime
    runtimeHelpers: true,
    extensions: ['.js', '.ts', '.tsx'],
    configFile: './babel.config.js',
};

const nodeOptions = {
    extensions: ['.js', '.tsx', '.ts'],
};

const commonjsOptions = {
    ignoreGlobal: true,
    include: /node_modules/,
    namedExports: {
        react: Object.keys(react),
        'react-dom': Object.keys(reactDom)
    },
};

export default {
    input: 'src/index.tsx',
    output: {
        name: '[name].js',
        dir: 'dist',
        format: 'umd',
        sourcemap: true,
    },
    plugins: [
        nodeResolve(nodeOptions),
        sass(),
        commonjs(commonjsOptions),
        babel(babelOptions)
    ],
};

Babel: I managed to compile the typescript code however once I came close to transpiling SASS files I would end up with suggestions to use webpack for that...

TSC: I successfully could run the typescript compiler and it would compile all the files without problems and would maintain the same structure. However TSC does not support other transpiling options so after a lot of searches I would end up with suggestions to use webpack and "ts-loader" or "babel-loader"..

tsconfig:

{
  "extends": "../../tsconfig.build.json",

  "compilerOptions": {
    "lib": [ "es2015", "dom" ],
    "outDir": "dist",
    "baseUrl": ".",
    "declaration": true,
    "composite": true,
    "module": "commonjs",
    "target": "es5"
  },

  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Desirced solution: I should be able after compiling the library and installing it in another project be able to run the following:

import { Tabs } from 'my-lib/Tabs';
import { Tabs } from 'my-lib';