different routes for admin and front panel in reactjs

I am creating a one e-commerce website with ReactJS. I am trying to create a admin and front panel in same reactjs repo.

I want to separate admin and front routes. Please find my below code.

App.JS

import React from "react";
import { Admin } from "./Admin";
import { Front } from "./Front";
import {
  BrowserRouter as Router,
  Routes, Route
} from "react-router-dom";


function App() {
  return (

    <Router>
      <Routes>
        <Route path="/" element={<Front />} />
        <Route path="/admin/*" element={<Admin />} />
      </Routes>
    </Router>
  );
}

export default App;

Admin.JS

import React from "react";
import { Layout } from "./admin/Layout/Layout";


export function Admin(){
  return(
    <Layout/>
  )
}

Layout.JS

import React from "react";
import { Header } from "./Header";
import { Sidebar } from "./Sidebar";
import { Footer } from "./Footer";
import { Dashboard } from "../Dashboard";
import { Products } from "../Products";

import {
  BrowserRouter as Router,
  Routes, Route
} from "react-router-dom";

export function Layout() {
  return(
  <div className="container-scroller">
    <Header />
    <div className="container-fluid page-body-wrapper">
      <Sidebar />
      <div className="main-panel">
        <Routes>
                <Route path='/admin/dashboard' element={< Dashboard />}></Route>
                <Route path='/admin/products' element={< Products />}></Route>
              </Routes>
        <Footer />
      </div>
    </div>
  </div>
  )
}

Same as I did for front panel route i.e Front component in App. Js and Home Component