Are CSS modules available for excel add-in using React?

I have created a reactjs project using the Yeoman office generator. I am trying to keep the components and the styling files together. Are css modules available for this type of projects? Below is my code:

import * as React from "react";
import classes from "./Header.module.css"
const Header = (props) => {
  return <header className={classes["header-main"]}>...</header>;
};

export default Header;

For this case my Header.module.css is in the same folder as the Header.js file. But my Header.module.css file doesn't appear to have any effect on my component.

Is there something missing in my packages? Below is my package.json file.

{
  "name": "office-addin-taskpane-react-js",
  "version": "0.0.1",
  "repository": {
    "type": "git",
    "url": "https://github.com/OfficeDev/Office-Addin-TaskPane-React-JS.git"
  },
  "license": "MIT",
  "config": {
    "app_to_debug": "excel",
    "app_type_to_debug": "desktop",
    "dev_server_port": 3000
  },
  "scripts": {
    "build": "webpack -p --mode production --https false",
    "build:dev": "webpack --mode development --https false",
    "build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.",
    "dev-server": "webpack-dev-server --mode development",
    "lint": "office-addin-lint check",
    "lint:fix": "office-addin-lint fix",
    "prettier": "office-addin-lint prettier",
    "start": "office-addin-debugging start manifest.xml",
    "start:desktop": "office-addin-debugging start manifest.xml desktop",
    "start:web": "office-addin-debugging start manifest.xml web",
    "stop": "office-addin-debugging stop manifest.xml",
    "validate": "office-addin-manifest validate manifest.xml",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "@fluentui/react": "^8.16.0",
    "core-js": "^3.9.1",
    "es6-promise": "^4.2.8",
    "office-ui-fabric-react": "^7.10.0",
    "react": "^16.8.2",
    "react-dom": "^16.10.2",
    "regenerator-runtime": "^0.13.7"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "@types/es6-collections": "^0.5.29",
    "@types/find-process": "1.2.0",
    "@types/office-js": "^1.0.180",
    "@types/office-runtime": "^1.0.17",
    "@types/react": "^16.8.22",
    "@types/react-dom": "^16.8.4",
    "@types/react-hot-loader": "^4.1.0",
    "@types/webpack": "^4.4.34",
    "@types/webpack-dev-server": "^3.1.6",
    "babel-loader": "^8.2.2",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.4.1",
    "css-loader": "^5.2.4",
    "eslint": "^7.20.0",
    "eslint-plugin-office-addins": "^1.0.0",
    "eslint-plugin-react": "^7.16.0",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "file-loader": "^4.2.0",
    "find-process": "^1.4.4",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.5.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "office-addin-cli": "^1.2.2",
    "office-addin-debugging": "^4.2.2",
    "office-addin-dev-certs": "^1.6.2",
    "office-addin-lint": "^1.3.2",
    "office-addin-manifest": "^1.6.2",
    "office-addin-prettier-config": "^1.1.0",
    "postcss-loader": "^4.0.0",
    "react-hot-loader": "^4.12.6",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "ts-loader": "^6.2.2",
    "typescript": "^4.1.3",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "prettier": "office-addin-prettier-config"
}

Any insight is appreciated.