How to configure 'babel-plugin-styled-components' while using NextJS?

Question

I am using

"next": "12",
"babel-plugin-styled-components": "^1.13.2",

in a typescript nextjs project. Styled components work great, but now I want to hide their display names.

For this reason I added extra config to my already existing babel.config.js

module.exports = function (api) {
    return {
        presets: presets,
        plugins: [
            [
                'styled-components',
                {
                    ssr: true,
                },
            ],
            // below is the new part i added to already working babel config    
            [
                'babel-plugin-styled-components',
                {
                    namespace: 'my-styled-components-project',
                    displayName: false,
                    fileName: false,
                },
            ],
        ],
    };
};

after adding 'babel-plugin-styled-components', section next dev fails with

error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "/usr/src/app/node_modules/babel-plugin-styled-components/lib/index.js",
    "options": {
      "ssr": true
    },
    "dirname": "/usr/src/app",
    "ownPass": false,
    "file": {
      "request": "styled-components",
      "resolved": "/usr/src/app/node_modules/babel-plugin-styled-components/lib/index.js"
    }
  },
  {
    "alias": "/usr/src/app/node_modules/babel-plugin-styled-components/lib/index.js",
    "options": {
      "namespace": "my-styled-components-project",
      "displayName": false,
      "fileName": false
    },
    "dirname": "/usr/src/app",
    "ownPass": false,
    "file": {
      "request": "babel-plugin-styled-components",
      "resolved": "/usr/src/app/node_modules/babel-plugin-styled-components/lib/index.js"
    }
  }
]
    at createDescriptors.next (<anonymous>)
    at createPluginDescriptors.next (<anonymous>)
    at plugins.next (<anonymous>)
    at mergeChainOpts.next (<anonymous>)

Answer 1

I found the solution, as next is replacing the namespace of the config had to use only styled-components

Confusing part here was that the official documentation of babel-plugin-styled-components showed the example of babel.config.js using that namespace

so the below works fine

            module.exports = function (api) {
    return {
        presets: presets,
        plugins: [
            [
                'styled-components',
                {
                    ssr: true,
                    namespace: 'my-styled-components-project',
                    displayName: false,
                    fileName: false,
                },
            ],
        ],
    };
};