I'm trying to pass a function that returns a hex value of a color from an array of objects given a string.

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: '#FFF'
  }
}))

const ComponentName = () => {
    const UseColor = name => colors.brand.find(c => c.shade === name).color;
    const classes = useStyles();
    return (
    ...
    ...
    )
}

How can I pass UseColor as a function to useStyles() and use that in my styles as UseColor('a shade here'), where UseColor returns the associated defined hex value?