Как создать стиль из массива объектов с помощью material-ui

Я использую функциональный компонент reactjs. У меня есть массив объектов, в которых указаны стили

const data = [
        {
            id: 1,
            color: '#000'
        },
        {
            id: 2,
            color: '#fff'
        }
        // etc
    ]

Мне нужно отобразить на странице столько элементов, сколько объектов в массиве данных, и каждый элемент получает свой уникальный цвет (первый элемент получает цвет от первого объекта, второй от второго и т. д.).

Для этого я использую пользовательский хук useStyles из material-ui.

const useStyles = makeStyles((theme) => ({
    divColor: {
        background: data.map((el) => (
            el.color
        )
        )
    }
}));

Я расширяю саму часть HTML следующим образом

{data.map((el, index) => <div key = {index} className = {classes.divColor} />)}

В этом случае у меня есть 2 одинаковых элемента div с одинаковым свойством.

.makeStyles-startAccident-4 {
    background: #000, #fff;
}

Пример CodeSandBox

Где я неправ?