Wrong order for generated nested styles

__Expected behavior:__
Order of generated styles is same as in jss styles

__Describe the bug:__
In some cases for nested styles order of generated styles is REVERSED

__Reproduction:__
Styles:

```
export const test = createUseStyles({
test: {
'& $first': {
//
'&:hover': { color: 'white' },
},

'& $second': {
//
'&:hover': { color: 'red' },
},
},

first: { color: 'red' },

second: { color: 'blue' },
});
```

Generated styles:
```

.test-0-2-931 .second-0-2-933:hover {
color: red;
}
.test-0-2-931 .first-0-2-932:hover {
color: white;
}
.first-0-2-932 {
color: red;
}
.second-0-2-933 {
color: blue;
}

```

__Versions (please complete the following information):__
- jss: 10.10.0
- react-jss: 10.10.0
- Browser [e.g. chrome, safari]: Chrome 121.0.6167.140 (Last)
- OS [e.g. Windows, macOS]: Windows 10

Start by reproducing the supplied nested-style example with jss and react-jss 10.10.0 in Chrome, then inspect how the generated rules are ordered. Done means the generated nested hover rules preserve the order of the corresponding JSS styles instead of being reversed.

Written by the indexing model from the issue text.