ReactJS:动态更改html/jsx元素

我想动态更改我的JSX元素标记，但其余属性保持不变。假设我有这样的东西：-

import React, { useState } from 'react'
import classNames from 'classnames'
import { makeStyles } from '@material-ui/core/styles'
import DesktopWindowsIcon from '@material-ui/icons/DesktopWindows'
import DnsIcon from '@material-ui/icons/Dns'
import StorageIcon from '@material-ui/icons/Storage'
import CloudIcon from '@material-ui/icons/Cloud'
export const try = () => {
const classes = useStyles()
const [changeIconColor, setChangeIconColor] = useState('')  
const icons = [
{ id: 0, icon: <DesktopWindowIcon /> },
{ id: 1, icon: <DnsIcon /> },
{ id: 2, icon: <StorageIcon /> },
{ id: 3, icon: <CloudIcon /> },
]
return (
<>
{icons.maps(icon => (
<>
{/* this will work */}
{icon.icon}
</>
))}
</>
)
}
const useStyles = makeStyles((theme) => ({
icon: {
width: 100,
height: 100,
marginBottom: 12,
},
iconMouseHover: {
color: theme.palette.secondary.main
}
}))

但我想做的是这样的事情：-

import React, { useState } from 'react'
import classNames from 'classnames'
import { makeStyles } from '@material-ui/core/styles'
import DesktopWindowsIcon from '@material-ui/icons/DesktopWindows'
import DnsIcon from '@material-ui/icons/Dns'
import StorageIcon from '@material-ui/icons/Storage'
import CloudIcon from '@material-ui/icons/Cloud'
export const try = () => {
const classes = useStyles()
const [changeIconColor, setChangeIconColor] = useState('')  
const icons = [
{ id: 0, icon: <DesktopWindowsIcon key={icon.id} className={changeIconColor === icon.id ? classNames(classes.icon, classes.iconMouseHover) : classes.icon} /> },
{ id: 1, icon: <DnsIcon key={icon.id} className={changeIconColor === icon.id ? classNames(classes.icon, classes.iconMouseHover) : classes.icon} /> },
{ id: 2, icon: <StorageIcon key={icon.id} className={changeIconColor === icon.id ? classNames(classes.icon, classes.iconMouseHover) : classes.icon} /> },
{ id: 3, icon: <CloudIcon key={icon.id} className={changeIconColor === icon.id ? classNames(classes.icon, classes.iconMouseHover) : classes.icon} /> },
]
return (
<>
{icons.maps(icon => (
<>
{/* this will not work since it gave me an error saying icon is not defined in array above */}
{icon.icon}
</>
))}
</>
)
}
const useStyles = makeStyles((theme) => ({
icon: {
width: 100,
height: 100,
marginBottom: 12,
},
iconMouseHover: {
color: theme.palette.secondary.main
}
}))

有什么方法可以让我用React动态地做到这一点吗？可以更改图标标签但其余属性保持不变的东西：-

// only tag name changes
<OnlyThisChange className={changeIconColor === skill._id ? classNames(classes.icon, classes.iconMouseHover) : classes.icon} />

这可能与反应有关吗？