Material ui: Как динамически менять свойства массива иконок?

Есть большой массив иконок, условно:

const ICONS_ARRAY: React.ReactNode[] = [
<AlertCircleCheckOutline />,
<AppleSafari />,
<MotionPlay />,
<AppleKeyboardCommand />,
<FileDocumentMultipleOutline />,
<ClipboardArrowLeftOutline />,
<ViewDashboardOutline />,
<CalendarClockOutline />,
<RobotHappyOutline />,
<AccountWrenchOutline />,
<AccountGroupOutline />,
<AccountCogOutline />,
<RunFast />,
<SpeedometerSlow />]

Они выводятся в выпадающем списке. Нужно всем им присвоить свойства (размер, цвет),желательно без инлайн стилей и,что важно,мы используем mu v4.

Были попытки сделать так (i - индекс элемента в массиве):

               <MenuItem>
                    <Box>
                        <SvgIcon fontSize={'small'}>ICONS_ARRAY[i]</SvgIcon>
                    </Box>
                </MenuItem>,

Не работает (выводится белый прямоугольник без иконки). Зато если вместо ICONS_ARRAY[i] подставить непосредственно сам компонент,то все работает:

               <MenuItem>
                    <Box>
                        <SvgIcon fontSize={'small'}><RunFast /></SvgIcon>
                    </Box>
                </MenuItem>

Аналогично происходит при попытке присвоить свойства через React.cloneElement.

Подскажите пожалуйста рабочий метод или в чем ошибка. Не хочется в каждый элемент руками копировать свойства...