Модули CSS не определены при импорте в компонент React

Я создаю расширение Chrome, используя модули React, Webpack, TailwindCSS и CSS.

Но когда я пытаюсь импортировать модули CSS в свой компонент React, он оказывается неопределенным.

Я хочу, чтобы модули CSS были определены в объекте стилей

import React, { useState } from "react";
import styles from "../assets/injectedPopup.module.css";

const InjectedPopup = () => {
    const [open, setOpen] = useState<boolean>(false);
    console.log(styles);

    return (
        <div className="container">
            <div className="wrapper">
                <div
                    onClick={() => setOpen((prev) => !prev)}
                    className="avatar"
                >
                    <img
                        className="avatarImg"
                        src={chrome.runtime.getURL("lockr-logo.png")}
                        alt="logo"
                    />
                </div>
                {open && <div className="popup"></div>}
            </div>
        </div>
    );
};

export default InjectedPopup;

.container {
    position: absolute;
    top: 8rem;
    right: 0.5rem;
    z-index: 9999;
}

.wrapper {
    position: relative;
}

.avatar {
    height: 4rem;
    width: 4rem;
    cursor: pointer;
    border-radius: 9999;
    overflow: hidden;
}

.avatarImg {
    height: 100%;
    width: 100%;
}

.popup {
    position: absolute;
    top: 0;
    right: 5rem;
    border-radius: 2px;
    z-index: 9999;
    background: red;
    width: 5rem;
    height: 15rem;
}

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const HtmlPlugin = require("html-webpack-plugin");
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");

module.exports = {
    mode: "development",
    devtool: "inline-source-map",
    entry: {
        popup: path.resolve("./src/popup/popup.tsx"),
        options: path.resolve("./src/options/options.tsx"),
        contentScript: path.resolve("./src/contentScript/contentScript.tsx"),
    },
    module: {
        rules: [
            {
                use: "ts-loader",
                test: /\.tsx$/,
                exclude: /node_modules/,
            },
            {
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                ident: "postcss",
                                plugins: [tailwindcss, autoprefixer],
                            },
                        },
                    },
                ],
                test: /\.css$/i,
                exclude: /node_modules/,
            },
            {
                test: /\\.module.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1,
                            modules: true,
                        },
                    },
                ],
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve("src/static"),
                    to: path.resolve("dist"),
                },
            ],
        }),
        ...getHtmlPlugins(["popup", "options"]),
    ],
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        filename: "[name].js",
    },
};

function getHtmlPlugins(chunks) {
    return chunks.map(
        (chunk) =>
            new HtmlPlugin({
                title: "Lockrmail: email on your terms",
                filename: `${chunk}.html`,
                chunks: [chunk],
            })
    );
}