In Material UI how can I dynamically pass down the color to my style?

New to React and Material UI I'm stumped how to properly pass down a color dynamically I'm pulling from a JSON file and I'm not finding a good reference in my searches, StackOverflow or in the docs.

Research

• Material-ui hoverColor for MenuItem component?
• How can I access a hover state in reactjs?
• How do I change Material-UI MenuItem background on hover change from AutoComplete props?
• Material UI inline styling - specific component colours

Attempt

Given the JSON file:

[
  {
    "label": "Home",
    "href": "/",
    "colorHover": ""
  },
  {
    "label": "Monday",
    "href": "/mon",
    "colorHover": "#35c5bd"
  },
  {
    "label": "Tuesday",
    "href": "/tues",
    "colorHover": "#fa8b25"
  },
  {
    "label": "Wednesday",
    "href": "/wed",
    "colorHover": "#f26531"
  }
]

I bring it into my component and loop through it with:

  const getDrawerChoices = () => {
    return headersData.map(({ label, href, colorHover }) => {
      const colorChange = colorHover === '' ? 'inherit' : colorHover

      return (
        <Link
          {...{
            component: RouterLink,
            to: href,
            color: 'inherit',
            style: { textDecoration: 'none' },
            key: label,
          }}
        >
          <MenuItem className={menuItem.hover(colorChange)}>{label}</MenuItem>
        </Link>
      )
    })
  }

Material UI Styles:

const useStyles = makeStyles(colorChange => ({
  menuItem: {
    '&:hover': {
      backgroundColor: `${colorChange} !important`,
    },
  },
}))

but I'm thrown an error. How can I pass a color value dynamically to useStyles or do I need to do it inline with the ?