Expected behavior: Do not show warning, because it works well.

Describe the bug: For some reasons I wrote my code like this:

const useStyles = createUseStyles(({ colors, variables, breakpoints }) => ({
  // above line get the theme variables
  cropperRoot: {
    margin: [0, -variables.gutter],
  },
  cropContainer: ({ cropWrapSize = 250 }) => ({
    // above line get the variables from passed props to useState({ cropWrapSize })
    height: cropWrapSize + 44 + 60,
    padding: [44, 0, 60],
    overflow: 'hidden',
    background: colors.backgroundIcon,
  }),

Now I'm faced to this warning:

Warning: [JSS] Function values inside function rules are not supported.

Versions (please complete the following information):

• jss: "^10.5.1",
• Browser [e.g. chrome, safari]: 89.0.4
• OS [e.g. Windows, macOS]: Big Sur 11.2.3 Feel free to add any additional versions which you may think are relevant to the bug.

Why this Warning is shown?