通过迭代反应渲染SVG

Question

我有以下代码：

import Icon1 from '../assets/goodsCardsIcons/icon1.svg';
import Icon2 from '../assets/goodsCardsIcons/icon2.svg';

const DATA = [
    {
        icon: Icon1,
        title: 'name1',
        label: 'lorem',
    },
    {
        icon: Icon2,
        title: 'name2',
        label: 'lorem',
    },
]

并希望在循环中渲染每个SVG：

...
    DATA.map(({ icon }) => {
        const Icon = icon;
        return <Icon />;
    });
...

但是结果是我没想到。图像被重复，并且我有这样的图片：

我做错了什么？