Add theme in React reusable components library with rollup configs

Question

rollup.config.mjs

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import terser from '@rollup/plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import { createRequire } from 'module';

const load = createRequire(import.meta.url);
const packageJson = load('./package.json');

export default [
    {
        input: './src/index.ts',
        output: [
            {
                file: packageJson.main,
                name: 'ui-components',
                format: 'umd',
                sourcemap: true
            },
            {
                file: packageJson.module,
                format: 'esm',
                sourcemap: true
            }
        ],
        treeshake: 'safest',
        plugins: [peerDepsExternal(), resolve(), commonjs(), typescript(), terser()],
        external: [
            'react',
            'react-jsx-runtime',
            'react-dom',
            'd3-color',
            'react-virtuoso',
            'styled-components',
            'stylis'
        ]
    }
];

enter image description here

I have a mono-repo setup consists of multiple packages so, I have created a react resuable ui components library using Typescript, I have used styled components. I want to use this library in multiple packages.

But I'm able to build the ui library successfully but when I try to use the components I get errors.