css-loader and webpack cause that in builded code style names are avaialbe in .default property

Question

i have a problem with css-loader in webpack. I have a normal configuration (starndard webpack config file, with ts-loader, css-loader) and after sucessfull build, this can not work:

import * as css from "./AppLogoStyles.css";
...
<AppMainLogo className={css.logo} />

because in builded file, it is hidden into css.default.logo, not into css.logo.

I have this tsconfig

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "declaration": true,
    "jsx": "react",
    "skipLibCheck": true,
    "strictNullChecks": true
  }
}

Webpack config

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: "development",
    entry: './src/index.ts',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [new MiniCssExtractPlugin()],
    module:{
        rules: [
            {
                test:/\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            modules: "global",
                        },
                    },
                ]
            },
            {
                test:/\.ts$/,
                use:['ts-loader']
            }
        ]
    },
};

Someone clue why is behave like this? Starnge is that i do some upgrades from older version and its working fine in webpack4, but not in webpack5.