styled-components: [v6] Upgrading from 5.1.1 to 6.0.0-beta.2 has broken babel-plugin-styled-components-css-namespace

Environment

In the process of upgrading React to v18 we found that Styled-components was throwing an error about breaking the rule of hooks. Upgraded styled-components to the latest version it appears that the babel-plugin-styled-components-css-namespace recommended in the styled-component docs no longer works correctly. I note that the plugin has not been updated in a few years and appears inactive.

Steps to reproduce

Given the babel config

['@quickbaseoss/babel-plugin-styled-components-css-namespace', { cssNamespace: '.ssa-app' }],

and the code

  const StyledIcon = styled(IcomoonReact)`
    transform: ${(props) => (props.$flipx ? `scaleX(-1)` : 'none')};`
  `
  
  <StyledIcon $flipx={true}   />
  <StyledIcon $flipx={false}   />

Expected Behavior

On version 5.1.1 the above would produce 2 styles and correctly assign the classnames to the elements in the DOM. (.ssa-app is the css prefix defined in babel-plugin-styled-components-css-namespace)

.ssa-app .lnugha {
    transform: none;
}

.ssa-app .hHOYwd {
    transform: scaleX(-1);
}

Actual Behavior

Since updating to 5.3.5 the CSS is as follows and both elements have the same class of sc-bczRLJ and thus both look the same (flipped).

.ssa-app .sc-bczRLJ {
    transform: scaleX(-1);
}

.ssa-app .sc-bczRLJ {
    transform: none;
}

.ssa-app .sc-bczRLJ {
    transform: none;
}

I’m completely stuck as to how to achieve the global css namespace in 5.3.5.