Can't using css module in typescript with rollup

Question

I'm building an UI react library for my company. I'm using typescript, css modules, and rollup. after I build and try to import the library. the css or style doesnt work. need help

this is my a button component

import React, { useEffect, useRef } from 'react';
import styles from './style.module.css';

interface ComponentProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  ref?: React.Ref<HTMLButtonElement>;
}

export const Component = React.forwardRef<HTMLButtonElement, ComponentProps>((props, ref) => {
  const buttonRef = useRef<HTMLButtonElement | null>(null);
return (
    <button {...props} ref={mergedRef} className={`${props.className && props.className} ${styles.component}`}>
      {props.children}
    </button>
  );
});

this is the rollup.config.mjs. i set the module in post css to be true.

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import dts from 'rollup-plugin-dts';
import react from 'react';
import reactDom from 'react-dom';
import packageJson from './package.json' assert { type: 'json' };
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';

export default [
  {
    preserveModules: true,
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
      },
      {
        file: packageJson.module,
        format: 'esm',
      },
    ],
    plugins: [
      resolve(),
      commonjs({
        include: 'node_modules/**',
        namedExports: {
          react: Object.keys(react),
          'react-dom': Object.keys(reactDom),
        },
      }),
      typescript({ tsconfig: './tsconfig.json' }),

      postcss({
        plugins: [autoprefixer()],
        extract: true,
        modules: true,
      }),
    ],
    external: [...Object.keys(packageJson.dependencies || {})],
  },
  {
    preserveModules: true,
    input: 'dist/esm/types/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    plugins: [
      dts(),

      postcss({
        plugins: [autoprefixer()],
        extract: true,
        modules: true,
      }),
    ],
    external: [...Object.keys(packageJson.dependencies || {})],
  },
];

the tsconfig.json. ive installed typescript-plugin-css-modules.

{
  "compilerOptions": {
    "target": "ESNext",
    "outDir": "build",
    "jsx": "react",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": false,
    "module": "ESNext",
    "allowJs": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "baseUrl": "src",
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },
  "include": ["src/**/*"]
}

I think there's something wrongwith it? or I missing something? because, after i build the library with rollup, and i import it, it display a button component with no style. but when i inspect the button element, the button classes are exist.