Unable to use named imports from CSS modules in my chrome extension that is built in React 18 and bundled manually using webpack

Question

I am building a Chrome Extension using React and bundling it all up using Webpack. I am using CSS-Modules to style my components and to prevent bleeding of CSS. With the current code I am able to import module stylesheets like:

import timerStyles from './Timer.module.css';

Since a single stylesheet has multiple classes and I am importing multiple stylesheets in a component, the code for adding classes in JSX becomes messy and readability is taking a hit. What I want to be able to do is to import styles as named imports. The CSS-Modules documentation states that I can do so.

import { fixedWidth } from './Timer.module.css';

However, when I attempt to do this, the classes are not applied in the resulting HTML.

Here is one of my components:

import React, {useEffect} from 'react';
import timerStyles from './Timer.module.css';

const Timer: React.FC = (): JSX.Element => {
    // Component code

    return (
        <>
            <div className={timerStyles.fixedWidth}>
                <span>{formatTime(hours)}</span>:
                <span>{formatTime(minutes)}</span>:
                <span>{formatTime(seconds)}</span>
            </div>
        </>
    );
};

export default Timer;

The Timer.module.css stylesheet in the same folder looks like

.fixedWidth {
    width: 45px;
}

My webpack.config looks like

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        ...
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            ...
        }),
        new CopyPlugin({
            patterns: [
                { from: 'public' },
                { from: 'src/assets', to: 'assets'}
            ],
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$|jsx/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ],
                    }
                }
            },
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: 'ts-loader',
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'],
            }
        ],
    },
};

I also have a declarations.d.ts file in the root of my project

declare module '*.scss';
declare module '*.css';

How do I get named imports to work using this setup?