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

__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`.

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

return

{text}

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](https://codesandbox.io/s/react-jss-bug-qytco), 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.

Start with the linked CodeSandbox and compare useStyles1, useStyles2, and useStyles3 in the Text component at widths below and above 360px. Trace how createUseStyles generates classes and resolves props in the media query; done means each component retains its own colors at both breakpoints and the reported undefined value is resolved.

Written by the indexing model from the issue text.