Проблема с областью действия в компоненте Stateless React

Question

Я использую React Storybook для разработки некоторых компонентов. Следующее принимает имя значка и выводит svg.

import React from 'react';
import { string } from 'prop-types';

const Icon = ({ icon }) => {
let resolved = require(`_assets/svg/${icon}.svg`).default;

if (!resolved) {
    throw Error(`Could not find icon ${icon}`);
}

return React.createElement(resolved);

}

Icon.propTypes = {
    icon: string.isRequired
}


export default Icon;

Это прекрасно работает, когда я вызываю один компонент, однако, если я пытаюсь отобразить значок более одного типа, они не отображаются, или иногда все отображаются как первый вызванный значок. Я думаю, что это проблема масштаба, но я не могу решить ее.