:has(:focus-visible) gives different and unexpected results to &:has(:focus-visible)

[dddlr]

Describe the bug
We expect the :focus-visible in the :has(:focus-visible) selector to be unmodified in the output CSS, just like in &:has(:focus-visible) (with the ampersand). However, this is not the case - for some reason, the presence of & matters in this specific example when it in fact should not.

To Reproduce

Container gives correct output, while Container2 gives incorrect output. We want Container2 to give the same output as Container.

const Container = styled.div({
  "&:has(:focus-visible)": {
    "background": "purple",
  },
});
// results in
// ._1o9o1cnh:has(:focus-visible) { background-color: purple }
// (correct!)

const Container2 = styled.div({
  ":has(:focus-visible)": {
    "background": "purple",
  },
});
// results in
// ._1vux1cnh:has(._1vux1cnh:focus-visible) { background-color: purple }
// (wrong!)

const App = () => (
  <>
    <Container>
      {"Hello from webpack?"}
      <input name="firstName" type="text" />
      {"Goodbye from webpack!"}
    </Container>
    <Container2>
      {"Hello from webpack?"}
      <input name="firstName" type="text" />
      {"Goodbye from webpack!"}
    </Container2>
  </>
);

Screenshots
The above code example, with :focus-visible turned on for both <input> elements through the Chrome inspection tools: