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:

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(
    <div className={classes.wrapper}>
      <h2>{title} ({type})</h2> // extra ({type}) added by me to verify that the type was being passed through - it is
      {children}
    </div>
  )
}

The problem lies in the arrow functions, e.g.:

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.
[email protected] C:\dev\react-training\styling-tutorial
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── [email protected] extraneous
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

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