Nothing is showing on the Screen as I am using react routing to display different components

I am using react router to display different components according to the different URL , but I am unable to see anything on http://localhost:3000/ , It is showing only Blank white screen.

this is my App.js file:

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 = () => {
  (

    <BrowserRouter>
      <Box sx={{ backgroundColor: '#000' }}>
        <Navb />
        <Routes>
          <Route path='/' exact element={<Feed />} />

          <Route path='/channel/:id' element={<ChannelDetail />} />
          <Route path='/search/:searchTerm' element={<SearchFeed />} />
        </Routes>
      </Box>

    </BrowserRouter>

  );
}

export default App

Below is my /components/index.js file where I am importing different components

export { default as ChannelDetail } from './ChannelDetail'
export { default as Navb } from './Navb'
export { default as SearchFeed } from './SearchFeed'
export { default as Feed } from './Feed'

Note: No error is showing in the compiler and also it is showing one warning as below:

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

(53:3) autoprefixer: start value has mixed support, consider using flex-start instead