title: 'Router' cannot be used as a JSX component
body: <p><strong>Error Message</strong></p>
  <pre><code>'Router' cannot be used as a JSX component.
    Its return type 'void' is not a valid JSX element.  TS2786
  
   import App from './App';
      5 | 
    &gt; 6 | ReactDOM.render(&lt;Router /&gt;, document.getElementById('root'));
  </code></pre>
  <p><strong>index.tsx code</strong></p>
  <pre><code>ReactDOM.render(&lt;Router /&gt;, document.getElementById('root'));
  </code></pre>
  <p><strong>Router.tsx code</strong></p>
  <pre><code>import React from 'react';
  import { BrowserRouter, Switch, Route } from 'react-router-dom';
  import App from './App';
  
  export default function Routes() {
    &lt;&gt;
      &lt;BrowserRouter&gt;
        &lt;Switch&gt;
          &lt;Route exact path=&quot;/&quot; component={App} /&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
    &lt;/&gt;;
  }
  </code></pre>
  <p><strong>tsconfig</strong></p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es6&quot;,
      &quot;lib&quot;: [&quot;dom&quot;, &quot;dom.iterable&quot;, &quot;esnext&quot;],
      &quot;allowJs&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;strict&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;noFallthroughCasesInSwitch&quot;: true,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;noEmit&quot;: true,
      &quot;jsx&quot;: &quot;react-jsx&quot;,
      
    },
    &quot;include&quot;: [&quot;src&quot;]
  }
  
  </code></pre>
  <p>What is this error ?</p>
  <p>Error in index.tsx <code>&lt;Router /&gt;</code></p>
  <p>How do I resolve this issue?</p>