Emotion css hover over parent and target inner element

Question

I have the following code using Emotion:

const styles = {
  container: css({
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#282c34",
    padding: "20px",
    color: "#fff",
    "&:hover .inner": {
      backgroundColor: "blue",
    },
  }),
  inner: css({
    margin: "auto",
    textAlign: "center",
    backgroundColor: "red",
    padding: "20px",
    color: "black",
  }),
};

function App() {
  return (
    <div css={styles.container}>
      <div css={styles.inner} className="inner">
        <h1>Hello World</h1>
      </div>
    </div>
  );
}

I want to change the inner element styles when I hover over the parent container. At the moment, I have to give it a className and target it like this:

"&:hover .inner": {
  backgroundColor: "blue",
}

Is there a better way with Emotion where I don't have to manually give it a className?

Codesandbox link: https://codesandbox.io/p/devbox/peaceful-shaw-forked-3tt68h