I have created a react typescript component library using rollup. My rollup config file looks like

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript2";
import svg from 'rollup-plugin-svg';
import scss from 'rollup-plugin-scss';
import postcss from 'rollup-plugin-postcss';
import babel from 'rollup-plugin-babel';
import postcssUrl from 'postcss-url';
import autoprefixer from 'autoprefixer';
import packageJson from "./package.json";

const externals = Object.keys(packageJson.peerDependencies || {});


export default {
    input: "./src/index.ts",
    output: [
        {
            file: packageJson.main,
            format: "cjs",
            sourcemap: true
        },
        {
            dir: packageJson.moduleDir,
            format: 'esm',
            preserveModules: true,
            sourcemap: true,
        }
    ],
    plugins: [
        babel({}),
        peerDepsExternal(),
        resolve(),
        commonjs(),
        typescript({useTsconfigDeclarationDir: true}),
        svg(),
        scss(),
        postcss({
            plugibs: [autoprefixer()],
            minimize: true,
            modules: {
                generateScopedName: "[hash:base64:5]"
            },
            plugins: [
                postcssUrl({
                    url: "inline"
                })
            ]
        }),

    ],
    external: externals
};

I added the library inside my react project, but when I do so I am getting a following error.

Attempted import error: '__exports' is not exported from '../../../../../_virtual/event-stack.development.js_commonjs-exports' (imported as 'eventStack_development').

Any suggestion, how can I remove this error?