Next.js `transpilePackages` giving Webpack error with Styled Components

I'm trying to use components in a repository that are imported from a custom UI library. Both use the same stack (React, Typescript, Styled Components) with the web app using Next.js. When running npm run dev I'm getting this error:

 ⨯ TypeError: styled_components__WEBPACK_IMPORTED_MODULE_1__ is not a function
    at eval (webpack-internal:///./node_modules/@test/test-ui/dist/components/CtaButton/CtaButton.style.js:35:22)
    at ./node_modules/@test/test-ui/dist/components/CtaButton/CtaButton.style.js (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\vendor-chunks\@test.js:90:1)
    at __webpack_require__ (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/@test/test-ui/dist/components/CtaButton/CtaButton.jsx:7:74) 
    at ./node_modules/@test/test-ui/dist/components/CtaButton/CtaButton.jsx (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\vendor-chunks\@test.js:20:1)
    at __webpack_require__ (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/@test/test-ui/dist/components/CtaButton/index.js:2:68)      
    at ./node_modules/@test/test-ui/dist/components/CtaButton/index.js (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\vendor-chunks\@test.js:100:1)
    at __webpack_require__ (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/@test/test-ui/dist/components/index.js:2:68)
    at ./node_modules/@test/test-ui/dist/components/index.js (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\vendor-chunks\@test.js:170:1)
    at __webpack_require__ (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/@test/test-ui/dist/index.js:2:69)
    at ./node_modules/@test/test-ui/dist/index.js (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\vendor-chunks\@test.js:240:1)
    at __webpack_require__ (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\webpack-runtime.js:33:42) {
  page: '/'
}

And my Next config:

const nextConfig = {
  transpilePackages: ["@test/test-ui"],
  output: "export",
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
};

export default nextConfig;

To distribute the UI library I'm using the following command:

rm -rf dist && npx tsc && npx tsc-alias

Here's the TS Config:

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "target": "ES2020",
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "strictBindCallApply": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "declaration": true,
    "outDir": "dist",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": [
    "node_modules",
    "src/**/*.test.ts",
    "src/**/*.test.tsx",
    "src/**/*.stories.ts",
    "src/**/*.stories.tsx"
  ]
}

Long story short, I'm just compiling the TS/TSX files into dist/, along with declaration files.

Seems like there's not really any documentation on this. Most of the solutions that I've seen have included Babel, however those seem outdated as Next.js moved its default compiler to SWC instead. Additionally there was previously a library used to transpile packages, however this is now integrated in the Next config.

What I know is that I get an error without the transpilePackages property set in the Next config:

 ⨯ ./node_modules/@test/test-ui/dist/components/CtaButton/CtaButton.jsx
Module parse failed: Unexpected token (4:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this 
file. See https://webpack.js.org/concepts#loaders
| import { ButtonTheme } from "./types";
| export function CtaButton({ text, href, onClick, theme = ButtonTheme.Light, }) {
>     return (<CtaButtonBox href={href} onClick={onClick} $buttonTheme={theme}>
|       <ButtonText>{text}</ButtonText>
|       <ArrowSvg />

Import trace for requested module:
./node_modules/@test/test-ui/dist/components/CtaButton/CtaButton.jsx
./node_modules/@test/test-ui/dist/components/CtaButton/index.js
./node_modules/@test/test-ui/dist/components/index.js
./node_modules/@test/test-ui/dist/index.js

Adding the transpilePackages property solves it, which makes sense, so I'm confident that this is narrowed down to either my build process or a Webpack/Next config issue. I've tried using Babel, SWC, and Rollup all independently to resolve this issue and none of the configurations seem to do it. I have seen a Babel plugin that resolves some issues with Styled Components, but it didn't work for this particular issue