Реагировать на отображение избыточного значка

Question

В приложении реагирования мне нужно убедиться, что иконки отображаются в трех категориях.Например, значок сборки, значок дома и значок работы.В настоящее время некоторые значки смешиваются в разных категориях.Пожалуйста, проверьте код ниже, чтобы увидеть, можем ли мы создать цикл для отображения значков с помощью JSX.

     {/* Icon */}
         {(type !== 'button') &&
           <OurtemIcon color="inherit">
             <Icon icon={type} defaultIcon="TypeOne"/>
           </ourItemIcon>
         }

        const iconComponent = { ...icin.jsx
          TypeOne: ContentCopy,
          TypeTwo: Computer,
          TypeThree: Build,
        }
   //...............................
    const sanitize = icon => icon && icon.replace('-', '');
    const Icon = ({ icon, defaultIcon, ...other }) => {
      const Component = iconComponent[sanitize(icon)] || 
    iconComponent[sanitize(defaultIcon)];
      return Component ? <Component {...other} /> : null;
    };

    export default Icon;

Спасибо за ваш ввод.