title: How do I render the react components dynamically from imported module?
body: <p>I am trying to render the React components dynamically based on the routes that are given in the URL.</p>
  <p>canvas/index.tsx</p>
  <pre><code>export { default as CardGroup } from &quot;./cards.example&quot;;
  </code></pre>
  <p>src/App.tsx</p>
  <pre><code>import React from &quot;react&quot;;
  import {
    useParams
  } from &quot;react-router-dom&quot;;
  import * as Canvas from &quot;./canvas&quot;;
  
  
  const App: React.FC = () =&gt; {
      const params = useParams();
      const widgetName = (params.widgetName ?? '';
        return (
        &lt;div className = &quot;App&quot; &gt; 
        {&lt; Canvas[widgetName] / &gt;} // error here
        &lt;/div&gt;
        );
      };
  
  export default App;
  </code></pre>
  <p>I am not able to render the widget. It give me the following error.</p>
  <pre><code>Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import(&quot;/Users/mypc/Code/atoms/src/canvas/index&quot;)'.
  </code></pre>
  <p>No index signature with a parameter of type 'string' was found on type 'typeof import(&quot;/Users/mypc/Code/atoms/src/canvas/index&quot;)'.</p>
  <p><a href="https://i.stack.imgur.com/mnWQw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mnWQw.png" alt="enter image description here" /></a></p>