Webpack | Не подтягиваются стили (.css) в готовой сборке | React

Webpack'ом собрал файлы (.css, .js) в библиотеку и использую её в другом проекте React
Стили указанные в компоненте не проходят, хотя файл .css присутствует и стили там есть
Файл UiButton.jsx

import styles from './UiButton.module.css';

const UiButton = () => {
    return (
        <>
            <button className={styles.button}>Text</button>
        </>
    );
}

export default UiButton;

Файл index.js

import UiButton from './UiButton/UiButton';
import './index.css';

export { UiButton };

Файл webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    libraryTarget: "umd",
    library: "uilibrarytest"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader' ]
      }
    ]
  },
  plugins: [ 
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
        filename: 'index.css',
    }),
    // new HtmlWebpackPlugin({
    //     template: './public/index.html',
    // }),
    new webpack.ProvidePlugin({
        "React": "react",
      }),
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
  },
}

А вот это собирает webpack:

.button {
    background: red;
}
html {
  margin: 0;
  padding: 0;
}

Как сделать так, чтобы при использовании компонента из данной библиотеки стили к нему тоже подтягивались???