title: Nothing is showing on the Screen as I am using react routing to display different components
body: <p>I am using react router to display different components according to the different URL , but I am unable to see anything on <strong>http://localhost:3000/</strong> , It is showing only Blank white screen.</p>
  <p>this is my App.js file:</p>
  <pre><code>import React from 'react'
  import { BrowserRouter, Routes, Route } from 'react-router-dom'
  import { Box } from '@mui/material'
  
  import { Feed, Navb, SearchFeed, ChannelDetail } from './components/index'
  
  
  
  const App = () =&gt; {
    (
  
      &lt;BrowserRouter&gt;
        &lt;Box sx={{ backgroundColor: '#000' }}&gt;
          &lt;Navb /&gt;
          &lt;Routes&gt;
            &lt;Route path='/' exact element={&lt;Feed /&gt;} /&gt;
  
            &lt;Route path='/channel/:id' element={&lt;ChannelDetail /&gt;} /&gt;
            &lt;Route path='/search/:searchTerm' element={&lt;SearchFeed /&gt;} /&gt;
          &lt;/Routes&gt;
        &lt;/Box&gt;
  
      &lt;/BrowserRouter&gt;
  
    );
  }
  
  export default App
  </code></pre>
  <p>Below is my /components/index.js file where I am importing different components</p>
  <pre><code>export { default as ChannelDetail } from './ChannelDetail'
  export { default as Navb } from './Navb'
  export { default as SearchFeed } from './SearchFeed'
  export { default as Feed } from './Feed'
  </code></pre>
  <p><strong>Note:</strong> No error is showing in the compiler and also it is showing one warning as below:</p>
  <blockquote>
  <p>WARNING in ./src/index.css
  (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css)
  Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
  Warning</p>
  <p>(53:3) autoprefixer: start value has mixed support, consider using
  flex-start instead</p>
  </blockquote>