JSS makes several classes in media query breakpoint, conflict with each others

[amerllica]

Expected behavior:

I wanna pass color from props to a ReactJs component that name is Text, then in a media query breakpoint I wanna change the color. I know how I can settle this issue by definitely it is a bug from JSS. I add two Text component, first red, second blue, I expect in a width smaller than 360 first text should be red second should be blue. and also in a width bigger than 360 the first text should be yellow and the second should be green.

const Text = ({ color, text }) => {
  // const classes = useStyles1({ color });
  // const classes = useStyles2({ color });
  const classes = useStyles3({ color });

  return <h2 className={classes.h2}>{text}</h2>;
};

const useStyles1 = createUseStyles({
  h2: ({ color }) => ({
    color
  }),
  "@media (min-width: 360px)": {
    h2: ({ color }) => ({
      color: color === "blue" ? "green" : "yellow"
    })
  }
});

const useStyles2 = createUseStyles(({ color }) => ({
  h2: {
    color
  },
  "@media (min-width: 360px)": {
    h2: {
      color: color === "blue" ? "green" : "yellow"
    }
  }
}));

const useStyles3 = createUseStyles({
  h2: {
    color: ({ color }) => color
  },
  "@media (min-width: 360px)": {
    h2: {
      color: ({ color }) => (color === "blue" ? "green" : "yellow")
    }
  }
});

Describe the bug: As you see here, there is just one class with different values, and they overwrite each other, also there is another but, when I try to pass props value from a upper function it color gonna be undefined

Reproduction:

For both issues I create just one CodeSandBox, and you can use useStyles1 in the Text component and for another you can use useStyles2. both has issues.

Update: I added the third type of writing style, but still it has bug.

Versions (please complete the following information):

• jss: 10.5.1
• Browser [e.g. chrome, safari]: Google Chrome 88
• OS [e.g. Windows, macOS]: macOS big sur Feel free to add any additional versions which you may think are relevant to the bug.