Uncaught TypeError: routes.forEach is not a function "ReactJS Ecoomerce Part 6 in youtube"

**Watching ecommerce react laravel api part6 tutorial in Youtube trying to configure how it will work in react v6 because my Routes is not working in inspect>console this is what I get "Uncaught TypeError: routes.forEach is not a function" Thank you in Advance **https://www.youtube.com/watch?v=EXclftuufD4&list=PLRheCL1cXHrtT6rOSlab8VzMKBlfL-IEA&index=8

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter as Router} from 'react-router-dom'
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.js

import React from 'react';
import {useRoutes} from 'react-router-dom';
import Routes from './routes/Routes';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.js';
import axios from 'axios';

axios.defaults.baseURL = "http://127.0.0.1:8000/";
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.post['Accept'] = 'application/json';

axios.defaults.withCredentials = true;
axios.interceptors.request.use(function (config) {
    const token = localStorage.getItem('auth_token');
    config.headers.Authorization = token ? `Bearer ${token}` : '';
    return config 
  
  });





function App() {
  return (
    <div className="App">
        {
          useRoutes(Routes())
        }
            
            {/*<Route path="/login" element={<Login/>} />
            <Route path="/register" element={<Register/>} />*/}
            {/*<Route exact path="/" element={<Home/>} />
            <Route path="/login" element={localStorage.getItem('auth_token') ? <Navigate to="/"/> : <Login />} />
            <Route path="/register" element={localStorage.getItem('auth_token') ? <Navigate to="/"/> : <Register />} />*/}

            {/*<Route path="/*" element={<MasterLayout/>} />*/}
            
            {/*<Route element={<AdminPrivateRoute />}>
              {routes.map(({ path, component: Component }) => (
                <Route key={path} path={path} element={<Component />} />
              ))}
            </Route>*/}
          
    </div>
  );
}

export default App;


Routes.js

    import { Navigate } from 'react-router-dom';
import React, {useEffect, useState} from 'react';

import AdminLayout from '../layouts/admin/AdminLayout';
import AdminLogin from '../components/admin/auth/AdminLogin';
import AdminRegister from '../components/admin/auth/AdminRegister';
import AdminDashboard from '../components/admin/AdminDashboard';
import AdminProfile from '../components/admin/AdminProfile';
import GameManagement from '../components/admin/GameManagement';

import Home from '../components/frontend/Home'
import Layout from '../layouts/frontend/Layout';
import Login from '../components/frontend/auth/Login'
import Register from '../components/frontend/auth/Register'
import Dashboard from '../components/frontend/Dashboard';
import Profile from '../components/frontend/Profile';
import axios from 'axios';


const Routes = () => {

    const [Authenticated, setAuthenticated] = useState(false);

    const [loading, setLoading] = useState(true);


    useEffect(() => {
        axios.get(`/api/checkingAuthenticated`).then( res => {
            if(res.status === 200)
            {
                setAuthenticated(true);
            }
            setLoading(false);
        });
    
      return () => {
        setAuthenticated(false);
      }
    }, []);

    if(loading)
    {
        return <h1>Loading...</h1>
    }
    
    

    return (Authenticated ?
    [
        {path: '/', element: <Navigate to='/dashboard'/>},
        {path: '/', element: <Layout/>, children: [
            {path: '/dashboard', element: <Dashboard/>},
            {path: '/profile', element: <Profile/>},
        ]},
        {path: '/admin', element: <AdminLayout/>, children: [
            {path: '/admin/dashboard', element: <AdminDashboard/>},
            {path: '/admin/profile', element: <AdminProfile/>},
            {path: '/admin/game-management', element: <GameManagement/>},
        ]}, 
    ]
    : 
    [
        {path: '/*', element: <Navigate to='/login'/>},
        {path: '/', element: <Home/>, children: [
            {path: '/login', element: <Login/>},
            {path: '/register', element: <Register/>},
            {path: '/admin/login', element: <AdminLogin/>},
            {path: '/admin/register', element: <AdminRegister/>},
        ]}, 
    ]
    );
    
};

export default Routes;