Как связать компоненты React внутри тега привязки

У меня есть несколько компонентов и маршрутов в моем приложении. У меня есть боковое меню, в котором есть ссылки на другие компоненты моего приложения. Я попытался добавить компоненты, но ничего не происходит, отображается пустая страница. Не уверен, что я делаю неправильно. Любая помощь приветствуется.

Это мой компонент:

import React from 'react';
import AddNewFileMT from './AddNewFileMT';
import Home from '../routes/Home';

const SideMenu = () => {
    return (
        <div>
            <nav>
                <div>
                    <ul className = "sidebar"> 
                        <br />  
                        <li>
                            <a href = {<Home />}>Home<i className = "fas fa-home"></i></a>
                        </li>
                        <li>
                            <a href = {<Archive />}>Archive<i className = "fas fa-archive"></i></a>
                        </li>
                        <li>
                            <a href = {<AddNewFileMT />}>Add New<i className = "fas fa-folder-open"></i></a>
                        </li>
                        <li>
                            <a href = {<Analytics />}>Analytics<i className = "fas fa-chart-pie"></i></a>
                        </li>
                    </ul>
                </div>    
            </nav> 
        </div>
    );
};

export default SideMenu;

Тогда в моем маршруте у меня есть это:

import React from 'react'
import Header from '../components/Header'
import SideMenu from '../components/SideMenu'
import RegionalMap from '../components/RegionalMap'
import Footer from '../components/Footer'

export const Home = () => {
    return (
        <div>
            <Header />
            <SideMenu />
            <RegionalMap/>
            <Footer />
        </div>
    )
};

export default Home;

Это адрес в браузере при нажатии на элемент бокового меню: http://локальный:3001/[объект%20Объект]