Webpack と TypeScript で CSS モジュールを使用する

私は、Typescript と Next JS を使用しているプロジェクトに CSS モジュールを統合しようとしています。これまでの設定は次の通りです：

   module.exports = withCustomBabelConfigFile(
      withTypeScript(withCSS({ 
      cssModules: true,
        babelConfigFile: path.resolve("./babel.config.js"),
        webpack(config, options) {
          config.module.rules.push({
            test: /\.css$/,
            include: path.join(__dirname, 'pages/index.tsx'),
            use: [
              'style-loader',
              {
                loader: 'typings-for-css-modules-loader',
                options: {
                  modules: true,
                  namedExport: true,
                  camelCase: true
                }

              }
            ],
          })
          return config
        }
      }))
    );

私は typings-for-css-modules-loader プラグインを使って、Webpack に CSS の TS タイピングを自動生成させようとしています。

もし私が設定から withCSS() 関数を削除すると、型定義は生成されますが、要素に CSS が追加されないため、CSS モジュールは機能しません。しかし、設定に withCSS() を残しておくと、型定義は生成されませんが、CSS モジュールは機能します。

誰か以前にこの状況で Next JS の設定を使ったことがある人、あるいは私が何を間違えているのか知っている人はいますか？

ありがとう！