Storybook LESS imports included globally. How to separate styles per story?

On my storybook site, I have added Less imports to some of my components, but the CSS files generated by webpack are included globally in the of the site for all components. From the storybook documentation, it seems like CSS should be isolated to each component by default, so I'm not sure what the issue is. Any suggestions on how to isolate styles per component/story?

Ver: Storybook 6.2.9

Main.js (less-loader):

config.module.rules.push({
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              paths: [path.resolve(__dirname, "node_modules")],
            },
            sourceMap: true,
            webpackImporter: false,
          }
        }]
    });

stories/component.stories.js:

import React from 'react';
import { Component } from './component.js';
import './component.less';
import '@package/index.less';

...

stories/component-2.stories.js:

import React from 'react';
import { Component2 } from './component2.js';
import './component2.less';
import '@package-2/index.less';

...

This results in all LESS files being converted to CSS and added to the section of the site. They do not load separately per story.

If I missed any info, please lmk. Thanks :)