Имена классов через CSS модули генерируются странным образома

Я настроил CSS-modules через webpack, но в результате названия классов выглядят не так как надо.

`Node.js: v14.16.0`
`npm: 6`

Такое чувство, что webpack на них не реагирует. Хотя он должен выглядеть как-то так: class="Input-input_ytoew" но результат сами видите.

результат в DOM

<div>
    <input class="yBU80xuXSp1wp_WUBF_P" type="text" value="[email protected]">
</div>

webpack
----------
    import path from "path";
    import { DefinePlugin } from "webpack";
    import HtmlWebpackPlugin from "html-webpack-plugin";
    import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
    import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
    
    module.exports = {
      entry: "./src/index.tsx",
      resolve: {
        extensions: [".ts", ".tsx", ".js", ".css", ".scss"],
        plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })],
      },
      output: {
        path: path.join(__dirname, "/build"),
        filename: "build.js",
      },
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            loader: "ts-loader",
            options: {
              transpileOnly: true,
            },
            exclude: /build/,
          },
          {
            test: /\.s?css$/,
            use: [
              "style-loader",
              {
                loader: "css-loader",
                options: {
                  sourceMap: true,
                  importLoaders: 1,
                  modules: true,
                },
              },
            ],
            include: /\.module\.scss$/,
          },
          {
            test: /\.s?css$/,
            use: ["style-loader", "css-loader"],
            exclude: /\.module\.scss$/,
          },
        ],
      },
      devServer: {
        port: 3000,
        open: true,
        historyApiFallback: true,
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: "./public/index.html",
        }),
        new DefinePlugin({
          "process.env": process.env.production || !process.env.development,
        }),
        new ForkTsCheckerWebpackPlugin({
          eslint: {
            files: "./src/**/*.{ts,tsx,js,jsx}",
          },
        }),
      ],
    };


Input.module.scss
----------
    .input {
      color: red;
    }

Input.stx
----------
    import React from "react";
    
    import s from "./Input.module.scss";
    
    export const Input = ({ value }: any) => {
      return (
        <>
          <input className={s.input} type="text" value={value} />
        </>
      );
    };



package.json
----------

      "devDependencies": {
        "@types/node": "^16.7.10",
        "@types/react": "^17.0.19",
        "@types/react-dom": "^17.0.9",
        "@types/webpack": "^5.28.0",
        "@types/webpack-dev-server": "^4.1.0",
        "@typescript-eslint/eslint-plugin": "^4.30.0",
        "@typescript-eslint/parser": "^4.30.0",
        "css-loader": "^6.2.0",
        "eslint": "^7.32.0",
        "eslint-config-airbnb": "^18.2.1",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-import": "^2.24.2",
        "eslint-plugin-jsx-a11y": "^6.4.1",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.25.1",
        "eslint-plugin-react-hooks": "^4.2.0",
        "fork-ts-checker-webpack-plugin": "^6.3.2",
        "html-webpack-plugin": "^5.3.2",
        "node-sass": "^6.0.1",
        "prettier": "^2.3.2",
        "sass-loader": "^12.1.0",
        "style-loader": "^3.2.1",
        "ts-loader": "^9.2.5",
        "ts-node": "^10.2.1",
        "tsconfig-paths-webpack-plugin": "^3.5.1",
        "typescript": "^4.4.2",
        "webpack": "^5.51.1",
        "webpack-cli": "^4.8.0",
        "webpack-dev-server": "^4.1.0"
      }