title: How to store a component in an object in typescript?
body: <p>So I import multiple icons in react app and store them in an array of objects, it looks like below:</p>
  <pre><code>export const icons = [
      {
          title: 'Home',
          link: 'home',
          icon: &lt;AiOutlineHome className=&quot;icon&quot;/&gt;,
      },
      {
          title: 'Favorite',
          link: 'favorite',
          icon: &lt;BsHeart className=&quot;icon&quot;/&gt;,
      },
      {
          title: 'Search',
          link: 'search',
          icon: &lt;IoSearchOutline className=&quot;icon&quot;/&gt;,
      },
      {
          title: 'Playing',
          link: 'playing',
          icon: &lt;MdOutlineMovieCreation className=&quot;icon&quot;/&gt;,
      },
      {
          title: 'Upcoming',
          link: 'upcoming',
          icon: &lt;BsCalendarDate className=&quot;icon&quot;/&gt;,
      },
      {
          title: 'Popular',
          link: 'popular',
          icon: &lt;HiOutlineFire className=&quot;icon&quot;/&gt;,
      },
      {
          title: 'Popular',
          link: 'popular',
          icon: &lt;AiOutlineStar className=&quot;icon&quot;/&gt;,
      },
  ]
  </code></pre>
  <p>Then I import them in another component and map through them to display all icons. So when file is <code>icons.js</code> it works alright, but when I change it to <code>icons.ts</code> I get an error: <code>'AiOutlineHome' refers to a value, but is being used as a type here. Did you mean 'typeof AiOutlineHome'?</code> with all icons. Is there some way to solve it or should I just stick to using javascript?</p>