Storybook not append CSS Module styles of React component

I encountered an issue, the CSS Modules class name had generated, but the styles were not appended on HTML when I use storybook to render my React component.

It means when I inspect all the DOM elements using the development tool, it has the hashed class name, but the CSS style is empty.

Here is the code:

.storybook/main.js

const path = require('path');

const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args);
const ROOT_DIR = path.resolve(__dirname, '..');
const SRC_DIR = resolvePath('src');
const reStyle = /\.(css|less|styl|scss|sass|sss)$/;

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook/react',
  webpackFinal: async (config, { configType }) => {

    config.module.rules.push({
      test: /\.(scss)$/,
      rules: [
       // if remove this rule, the className is not generated at all
       {
          issuer: { not: [reStyle] },
          use: 'isomorphic-style-loader',
        },
        {
          include: SRC_DIR,
          loader: 'css-loader',
          options: {
            importLoaders: 2,
            sourceMap: true,
            modules: {
              localIdentName: '[name]-[local]-[hash:base64:5]',
            },
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            config: {
              path: './tools/postcss.config.js',
            },
          },
        },
        {
          test: /\.(scss|sass)$/,
          loader: 'sass-loader',
        },
      ],
    });

    return config;
  },
};

src/components/PullUp/PullUp.jsx

import React, { useRef, useState, useEffect, Fragment } from 'react';
import { node, bool, func, string } from 'prop-types';
import ReactDOM from 'react-dom';
import { useTransition, animated } from '@react-spring/web';

import styles from './PullUp.scss';

const PullUp = ({ children, title, visible = false, onClose }) => {
  

  return (
       <div key={key} className={styles.root} style={props}>
          <div className={styles.control}>
             <span className={styles.cancel} onClick={onClose}>
               text
              </span>
              <span className={styles.title}>{title}</span>
           </div>
           <div className={styles.content}>{children}</div>
        <div>
  );
};

PullUp.propTypes = {
  children: node.isRequired,
  title: string.isRequired,
  visible: bool.isRequired,
  onClose: func.isRequired,
};

const PortalPullUp = ({ ...props }) => {
  return ReactDOM.createPortal(<PullUp {...props} />, document.body);
};

export default PortalPullUp;

src/components/PullUp/PullUp.jsx

.root {
  background-color: red;
  position: fixed;
  width: 100%;
  height: 90%;
  left: 0;
  bottom: 0;
  border-radius: 15px 15px 0 0;
  padding: 16px;
  z-index: 4;
}

.control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cancel {
  flex: 1;
}

.title {
  flex: 2;
  text-align: center;
}

.content {
  text-align: left;
  height: 100%;
  width: 100%;
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 30px;
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.75);
  user-select: none;
  z-index: 3;
}

Here are the package versions.

"@storybook/addon-postcss": "^2.0.0",
"@storybook/preset-scss": "^1.0.3",
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-interactions": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/builder-webpack4": "^6.5.9",
"@storybook/manager-webpack4": "^6.5.9",
"@storybook/react": "^6.5.9",
"@storybook/testing-library": "^0.0.13",
"sass-loader": "^8.0.2",
"sass": "^1.43.4"
"css-loader": "^3.2.0",
"isomorphic-style-loader": "^5.1.0",

Does anyone have any clue? Thanks a lot!