Как использовать навигацию дважды через react router

написал данный код, на странице main сделал отдельный компонент footer, в который хотелось сделать ещё одну навигацию, но чуть чуть изменённую, но выдают данную ошибку "You cannot render a inside another . You should never have more than one in your app.", можно ли это как то сделать? если нет, то какой способ есть ещё?

import './App.css';
import Main from './pages/Main';
import Contacs from './pages/Contacs';
import Map from './pages/Map';
import Reviews from './pages/Reviews';
import Service from './pages/Service';
import Spec from './pages/Spec';
import MainNav from './components/MainNav';
import { BrowserRouter, Route, Routes } from 'react-router-dom';



function App() {
  return (
    <>
    <BrowserRouter>
      <MainNav/>
      <Routes>
        <Route path='/' element={<Main/>}></Route>
        <Route path='/Spec' element={<Spec/>}></Route>
        <Route path='/Service'element={<Service/>}></Route>
        <Route path='/Reviews' element={<Reviews/>}></Route>
        <Route path='/Contacs' element={<Contacs/>}></Route>
      </Routes>
    </BrowserRouter>
    </>
  );
}

export default App;

Вот так выглядит страница файла Main (Все импорты убрал специально)

function Main() {
  return (
    <>
      <div className='top'>
        <div className='mainlogo'><img src={logo} alt="logo" /></div>
        <div className='name'><h2>Салон красоты</h2> <h1>ЛИМЕ</h1></div>
        <div className='header_photo'><img src={mainphoto} alt="header_photo" /></div>
      </div>
      <div className='main'>
        <h1>О САЛОНЕ</h1>
        <p className='mainText'>Добро пожаловать в салон красоты Lime! Мы специализируемся на стрижках, окрашиваниях и укладках, предлагая нашим клиентам высококачественные услуги и индивидуальный подход. Наша миссия — сделать вас красивыми и уверенными в себе. В нашем салоне работают опытные мастера, которые постоянно совершенствуют свои навыки и следят за последними тенденциями в мире красоты.</p>
        <img className='photo1_main' src={mainphoto1} alt="photo1_main" />
        <img className='photo2_main' src={mainphoto2} alt="photo2_main" />
        <p className='mainText1'>Мы стремимся создать для вас идеальные условия, чтобы вы могли расслабиться и насладиться процессом преображения.</p>
        <FormContact />
        <Footer/>
      </div>

    </>
  )
}

Вот так выглядит файл с Footer

import React from 'react'
import Main from '../pages/Main';
import Contacs from '../pages/Contacs';
import Map from '../pages/Map';
import Reviews from '../pages/Reviews';
import Service from '../pages/Service';
import Spec from '../pages/Spec';
import FooterNav from '../components/FooterNav';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function Footer() {
  return (
    <>
    <BrowserRouter>
      <FooterNav/>
      <Routes>
        <Route path='/' element={<Main/>}></Route>
        <Route path='/Spec' element={<Spec/>}></Route>
        <Route path='/Service'element={<Service/>}></Route>
        <Route path='/Reviews' element={<Reviews/>}></Route>
        <Route path='/Map' element={<Map/>}></Route>
      </Routes>
    </BrowserRouter>
    </>
  )
}

export default Footer