如何为第三方库启用“styled-components”的SSR支持(NextJS+styled-components+babel+组件库)

Question

SSR 的样式组件需要使用特殊插件进行转译，例如（babel-plugin-styled-components 或 typescript-plugin-styled-components）

https://styled-components.com/docs/tooling#serverside-rendering

使用此方法，它将确定性组件 ID 添加到每个组件，以避免类名冲突，从而避免诸如类名不匹配之类的水合问题

我的 NextJS 应用程序中的 babel.config.json 设置为，

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true, "displayName": false, "minify": true }]]
}

这负责为我在应用程序（./src/components）中创建的样式组件启用SSR支持，但是

我正在使用一个第三方组件库（@org/carousel），它不是由我维护的，所以我无法控制它的构建和发布过程。

由于 NextJS 显然忽略了转译 node_modules ，所以我在next.config.js中查看了具有以下设置的next-transpiled-modules，希望它能够支持

const withTM = require('next-transpile-modules')(['@org/carousel']);

module.exports = withTM();

然而，在我的构建中，我没有看到为该组件添加确定性 ID。

要点： node_modules/@org/carousel/build/index.js 有styled.div()但我们需要它作为 styled.div.withConfig({componentId:'sc-someId'})

1. 我的方向正确吗？
2. 我们可以再次转译 ES5 兼容模块吗？（@org/carousel 在发布前已被转译）
3. 还有其他方法可以解决这个问题吗？

任何想法/想法/建议都将不胜感激！