Why does rollup not compile my styled-components

I was so happy that my Component Lib works with regular CSS but now I am trying to add styled components and of a sudden, I get the error (on the project which is importing the lib)

TypeError: Cannot read property 'useDebugValue' of null
styled.button

I really tried everything, I searched on the web and SO but couldn't find anything. It is just frustrating and hopefully you guys can help me.

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from 'rollup-plugin-babel'
import typescript from '@rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';
import postcss from 'rollup-plugin-postcss';

const packageJson = require('./package.json');
export default [
    {
        input: 'src/index.ts',
        output: [
            {
                file: packageJson.main,
                format: 'cjs',
                sourcemap: true,
            },
            {
                file: packageJson.module,
                format: 'esm',
                sourcemap: true,
            },
        ],
        plugins: [resolve(), commonjs(), babel({plugins: ['babel-plugin-styled-components'], exclude: 'node_modules/**'}), typescript({ tsconfig: './tsconfig.json' }), postcss()],
    },

    {
        input: 'dist/esm/types/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: 'esm', sourcemap: true,
    globals: { 'styled-components': 'styled' } }],
        plugins: [dts()],
    external: ['react', 'styled-components'],
    },
];

babel.config.js

module.exports = {
    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
  plugins: ['babel-plugin-styled-components',  {
    namespace: 'appname-',
    displayName: false,
    fileName: false
  }]
};

src/components/Button/styles.ts

import styled from "styled-components";

export const ButtonPrimary = styled.button`
  background-color: #0070f3;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  text-transform: uppercase;
  transition: background-color 0.2s ease-in-out;
  &:hover {
    background-color: #0060e6;
  }
  &:active {
    background-color: #0050d6;
  }
  &:focus {
    outline: none;
  }
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
`;

I hope you can help me and if you need more Info please tell me.

Best Regards Knome