Dynamic values don't work when using arrow functions

__Expected behavior:__
I expect CSS styling to be applied based on the dynamic values of properties I pass through with arrow functions in React.

__Describe the bug:__
Any JSS that uses arrow functions does not produce any CSS styling.

__Reproduction:__

_Sandbox:_

https://codesandbox.io/s/cool-cherry-5k2zn5?file=/src/components/Alert/Alert.js

**As you can see, when the page first loads, this particular styling (red/green font and borders) does *not* feed through. However if we make any changes to the file then suddenly it does load. What's happening here?**

From this tutorial here:

https://www.digitalocean.com/community/tutorials/how-to-style-react-components

Everything works until we get to this code:

```js
import React from 'react';
import PropTypes from 'prop-types';
import { createUseStyles } from 'react-jss';

const colors = {
success: '#6da06f',
error: '#f56260',
};

const useStyles = createUseStyles({
wrapper: {
border: ({ type }) => `${colors[type]} solid 1px`,
marginBottom: 15,
padding: 15,
position: 'relative',
'& h2': {
color: ({ type }) => colors[type],
margin: [0, 0, 10, 0],
}
}
});

export default function Alert({ children, type, title }) {
const classes = useStyles({ type })
return(

```
border: ({ type }) => `${colors[type]} solid 1px`,
...
color: ({ type }) => colors[type],
```

I have tried:

- excluding the braces (to make it look more like https://cssinjs.org/react-jss/?v=v10.9.1-alpha.2#dynamic-values)
- directly referencing `colors['success']` rather than `colors[type]` (just in case there was a problem with `type`)
- excluding `type` from the arrow function and just returning a string to check if I'm passing values through in the wrong way e.g. `border: () => '#f56260 solid 1px',`

No matter what I do, any line that includes an arrow function gets ignored and does not generate any CSS styling.

__Versions (please complete the following information):__
- jss: 10.9.0
- Browser [e.g. chrome, safari]: chrome, edge
- OS [e.g. Windows, macOS]: Windows
Feel free to add any additional versions which you may think are relevant to the bug.

```
PS C:\dev\react-training\styling-tutorial> npm list
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
styling-tutorial@0.1.0 C:\dev\react-training\styling-tutorial
├── @testing-library/jest-dom@5.16.4
├── @testing-library/react@13.3.0
├── @testing-library/user-event@13.5.0
├── nan@2.16.0 extraneous
├── react-dom@18.1.0
├── react-jss@10.9.0
├── react-scripts@2.1.3
├── react@18.1.0
└── web-vitals@2.1.4
```

The same seems to be happening here (though that's focussed on rtl and I don't know if that's exactly the same as what I'm using): https://github.com/cssinjs/jss/issues/1234

Start by running the linked CodeSandbox and reading src/components/Alert/Alert.js, focusing on the createUseStyles call and the arrow-function values. Compare the initial render with the hot-reload behavior and review the related issue 1234; done means dynamic arrow-function properties produce CSS on the first page load with react-jss 10.9.0.

Written by the indexing model from the issue text.