import styles undefined

To reproduce:

import styles from './index.less';

Current behavior:

const Home = () => {
  console.log(styles) //undefined
  return (
    <div className={styles.main}>
    </div>
  );
};

 {
      test: /\.less$/,
      use: [
        NODE_ENV ? 'style-loader' : MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader',
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              modules: true,
              javascriptEnabled: true,
            },
          },
        },
      ],
    }

Expected behavior:
I hope "className= { styles.main }" can work
first, why is that?
secondly, how to fix it?

Environment information:

• less version:4.1.3
• less-loaderversion:11.1.0
• nodejs version:20.11.1
• operating system:mac

Start with the shown LESS import and webpack loader configuration, then inspect how the less-loader and css-loader options handle CSS modules. Done means identifying why styles is undefined and verifying or documenting a configuration that makes styles.main available with the listed versions.