React app not rendering in browser when using AppRoutes

I'm trying to build a react app project, but I do not get any rending in the browser.

Note: this is my first time building react.

My code base:

App.js

import React, { Component } from 'react';
import { Route, Routes } from 'react-router-dom';
import AppRoutes from './AppRoutes.js';
import { Layout } from './components/Layout.js';
import './index.css';

export default class App extends Component {
  static displayName = App.name;

  render() {
    return(
        <Layout>
          <Routes>
            {AppRoutes.map((route, index) => {
              const { element, ...rest} = route;
              return <Route key={index} {...rest} element={element} />
            })}
          </Routes>
        </Layout>
    );
  }
}

index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App.js';
import reportWebVitals from './reportWebVitals.js';
import 'bootstrap/dist/css/bootstrap.css';

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <BrowserRouter basename={baseUrl}>
    <App />
  </BrowserRouter>
);

reportWebVitals();

AppRoutes.js

import { Index } from './pages/Home/Index.js';
import { About } from './pages/Home/About.js';
import { Menu } from './pages/Menu/Menu.js';
import { Contact } from './pages/Home/Contact.js';

const AppRoutes = [
    {
        index: true,
        element: <Index />
    },
    {
        path: '/home/about',
        element: <About />,
    },
    {
        path: '/menu',
        element: <Menu />
    },
    {
        path: '/contact',
        element: <Contact />
    },
];

export default AppRoutes;

Layout.js

import React, { Component } from "react";
import { Container } from "reactstrap";
import { Navigation } from "./Navigation.js";

export class Layout extends Component {
    static displayName = Layout.name;

    render() {
        return (
            <div>
                <Navigation />
                <Container>
                    {this.props.children}
                </Container>
            </div>
        );
    }
}

Navigation.js

import React, { Component} from "react";
import { Collapse, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from "reactstrap";
import { Link } from "react-router-dom";
import './Navigation.css';

export class Navigation extends Component {
    static displayName = Navigation.name;

    constructor(props) {
        super(props);

        this.toggleNavBar = this.toggleNavBar.bind(this);
        this.state = {
            collapsed: true
        };
    }

    toggleNavBar() {
        this.setState({collapsed: !this.state.collapsed});
    }

    render() { 
        return(
            <header>
                <Navbar className="navbar-expand-sm navbar-toggleable-sm navbar-dark ng-white mb-3" container light>
                    <NavbarBrand className="ms-4 ms-lg-0" tag={Link} to="/">
                        <h1 className="text-primary m-0">FOODY</h1>
                    </NavbarBrand>
                    <NavbarToggler onClick={this.toggleNavBar} className="mr-2"/>
                    <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
                        <ul className="navbar-nav flex-grow mx-auto p-4 p-lg-0">
                            <NavItem>
                                <NavLink tag={Link} to="/">Home</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink tag={Link} to="/menu">Menu</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink tag={Link} to="/contact">Contact Us</NavLink>
                            </NavItem>
                        </ul>
                    </Collapse>
                </Navbar>
            </header>
        );
    }
}