Material-UI makeStyles でネストした要素にクラス名でスタイルを適用したい

<div class="contents">
  <p>
   このグレーのエリアに hover したら ⭐️ が表示される
  </p>
  <div class="icon">⭐️⭐️⭐️</div>
</div>

.icon {
  display: none;
}

.contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ddd;

  &:hover {
    .icon {
      display: block;
    }
  }
}

const useStyles = makeStyles({
  contents: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#ddd",

    "&:hover": {
      backgroundColor: "#eee",

      "& $icon": {
        display: "block",
      },
    },
  },

  icon: {
    display: "none",
  },
});

export function SomethingComponent(): ReactElement | null {
  const classes = useStyles();

  return (
    <div className={classes.contents}>
      <p>このグレーのエリアに hover したら ⭐️ が表示される</p>
      <div className={classes.icon}><Icon name="star" /></div>
    </div>
  );
}

foo: {
  "&:hover": {
    "& > span": {
      display: "block",
    },
  },
},

contents: {
  "&:hover": {
    "& $icon": {
      display: "block",
    },
  },
},

const styles = {
  container: {
    // Reference the local rule "button".
    '& $button': {
      padding: '10px'
    },
    // Multiple local refs in one rule.
    '&:hover $button, &:active $button': {
      color: 'red'
    },
    '&:focus $button': {
      color: 'blue'
    }
  },
  button: {
    color: 'grey'
  }
}