Ошибка при импорте css в react приложение. У меня есть модуль, но мне нужен объект

В тестах приложения react с использованием typescript произошла ошибка. Через несколько часов я понял, что ошибка заключается в способе импорта стилей. Я провел несколько часов в чате gpt, но это не сильно помогло. Когда я импортирую классы, подобные этому: import * as cls from './Button.module.scss'; concole.log(cls) возвращает Module {__esModule: true, Symbol(Symbol.toString Tag): 'Module'} В приложении нет ошибок, но есть ошибка в тесте (jest), связанная с классами.

Когда я использую: import cls from './Button.module.scss'; Выскакивает ошибка в приложении:

TypeError: Cannot read properties of undefined (reading 'Button')
    at Button (http://localhost:3000/main.28f6bcc41182abdc5bde.js:5916:153)
    at renderWithHooks (http://localhost:3000/main.28f6bcc41182abdc5bde.js:23669:18)
    at mountIndeterminateComponent (http://localhost:3000/main.28f6bcc41182abdc5bde.js:28281:13)
    at beginWork (http://localhost:3000/main.28f6bcc41182abdc5bde.js:29804:16)
    at HTMLUnknownElement.callCallback (http://localhost:3000/main.28f6bcc41182abdc5bde.js:12347:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/main.28f6bcc41182abdc5bde.js:12396:16)
    at invokeGuardedCallback (http://localhost:3000/main.28f6bcc41182abdc5bde.js:12460:31)
    at beginWork$1 (http://localhost:3000/main.28f6bcc41182abdc5bde.js:35668:7)
    at performUnitOfWork (http://localhost:3000/main.28f6bcc41182abdc5bde.js:34774:12)
    at workLoopConcurrent (http://localhost:3000/main.28f6bcc41182abdc5bde.js:34760:5)

console.log(cls) возвращает Object, но при таком импорте в тесте ошибок нет.

webpack.config.js:

const cssLoader = {
    test: /\.s[ac]ss$/i,
    use: [
        // Creates style nodes from JS strings
        isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
        {
            loader: "css-loader",
            options: {
                modules: {
                    auto: (resPath: string) => Boolean(resPath.includes('.module.')),
                    localIdentName: isDev
                        ? '[path][name]__[local]--[hash:base64:8]'
                        : '[hash:base64:8]'
                }
            }
        },
        "sass-loader",
    ],
}

Я не вносил никаких изменений в этот файл.

global.d.ts:

declare module '*.scss' { 
    interface IClassNames {
        [className: string]: string
    }
    const classNames: IClassNames;
    export = classNames;
}

Здесь я попытался заменить интерфейс на type, но на самом деле сам дизайн как был, так и остался.

jest.config.ts:

moduleNameMapper: {
    '\\.(s?css)$': 'identity-obj-proxy',
},

Здесь я тоже использовал разные варианты указания расширений файлов, хотя в этих изменениях нет никакого смысла

babel.config.json:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic",
            }
        ]
    ],
    "plugins": [
        "i18next-extract"
    ]
}

Babel не трогал особо.

Дополняю вопрос Button.tsx:

import { classNames } from 'shared/lib/classNames/classNames';
import cls from './Button.module.scss';
import { ButtonHTMLAttributes, FC } from 'react';

export enum ThemeButton {
    CLEAR = 'clear',
    PRIMARY = 'primary'
}

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    className?: string;
    theme?: ThemeButton;
}

export const Button: FC<ButtonProps> = (props) => {
    const {
        className,
        children,
        theme,
        ...otherProps
    } = props;

    return (
        <button
            type='button'
            className={classNames(cls.Button, {}, [className, cls[theme]])}
            {...otherProps}
        >
            {children}
        </button>
    )
}

Дополняю вопрос 2 Button.module.scss:

.Button {
    cursor: pointer;
}

.clear {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    outline: none;
}

Подскажите, как избавиться от ошибок и перейти на import cls?