Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

i am using Version "react-router-dom": "^6.3.0",

and i want to use Router in my React application . my app.js looks like this

export default class App extends Component {

    render() {
        return (
            <BrowserRouter>

                <div className="App">

                    <Layout />

                    <div id="wrapper">

                        <SideMenuBar />

                        <div id="content-wrapper">

                            <Routes>
                                <Route path="/" element={<App />}/>          
                                <Route path="/" element={<VideoContent />}  />  

                            </Routes>

                            <Fotter />

                        </div>
                    </div>

                </div>

            </BrowserRouter>
        );
    }

and my imports are

import React, { Component } from 'react'; 
import AppRoutes from './AppRoutes';
import { Layout } from './components/Layout';
import { SideMenuBar } from './components/SideMenuBar';
import { Search } from './components/Search';
import { VideoContent } from './components/VideoContent';
import { Fotter } from './components/Fotter';
import { NavMenu } from './components/NavMenu';
import { RightSideMenuBar } from './components/RightSideMenuBar';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

my page does not display , i get an error on the console that states
router.ts:5 Uncaught Error: You cannot render a inside another . You should never have more than one in your app.

Thanks