Как я могу использовать изменяемую карту внутреннего массива для управления стилем в пользовательском интерфейсе материала?

Я использую Materil UI 4.11. Мы знаем, что с Material UI, если мы хотим использовать переменную внутри настройки стиля, мы можем сделать это следующим образом:

const useStyles = makeStyles((theme) => ({
    testStyle: {
        width: ({ ElementWidth }) => `${ElementWidth * 100}%`,
    }
})

а внутри компонента мы устанавливаем переменную и вызываем класс:

const styleProps = {
    ElementWidth,
}
const classes = useStyles(styleProps)
<Box className={classes.testStyle}>
    element
</Box>

Мой вопрос: если я хочу использовать переменную внутри одной карты массива, как я могу ее установить? Массив выглядит так:

const itemArr = [
    {name:"a",successStatus:true,},
    {name:"b",successStatus:false},
    {name:"c",successStatus:true},
]

компонент:

<Box>
    {itemArr.map((item, index) => {
        return (
            <Box key={index}>
                <Typography className={classes.successStatusStyle}>
                    {item.name}
                </Typography>
            </Box>
        )
    })}
</Box>

Что я хочу установить в классе, так это то, что цвет будет отличаться в зависимости от значения item.successStatus:

const useStyles = makeStyles((theme) => ({
    successStatusStyle:{
        color: ({ successStatus }) => successStatus ? theme.palette.success.main : theme.palette.error.main
    }
})

Как передать item.successStatus в useStyles, чтобы каждый элемент имел динамический цвет на основе successStatus?

Я знаю, что с помощью встроенного стиля я могу изменить цвет, например style={{ color: successStatus ? "green" : "blue" }}, но причина, по которой я хочу установить его внутри useStyles, заключается в том, что я хочу использовать шаблон из моей темы или шаблон по умолчанию из пользовательского интерфейса материала. Поэтому я не могу использовать здесь встроенный стиль.