React JS отображает пустую страницу при React Router

Есть код ниже. Отображает ток пустую страницу, в чем проблема?

import React, { Component } from 'react';
import { Navbar, Nav, FormControl, Container, Button, Form } from 'react-bootstrap';
import logo from './logo192.png';
import { BrowserRouter, Routes ,Router , Route , Link} from 'react-router-dom';

import Home from '../pages/Home';
import About from '../pages/About';
import Contacts from '../pages/Contacts';
import FamCapts from '../pages/FamCapts';
    export default class Header extends Component {
        render() {
            return (
                <>
                    <Navbar collapseOnSelect expand="md" bg="primary" variant="dark">
                        <Container>
                            <Navbar.Brand href="/">
                                <img
                                    src={logo}
                                    height="30"
                                    width="30"
                                    ClassName="d-inline-block align-top"
                                    alt="Logo"
                                /> <strong> Mills Dynasty </strong>
                            </Navbar.Brand>
                            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                            <Navbar.Collapse id="responsive-navbar-nav">
                                <Nav className="mr-auto">
                                    <Nav.Link href="/"> Главная страница </Nav.Link>
                                    <Nav.Link href="/about"> О семье </Nav.Link>
                                    <Nav.Link href="/contacts"> Наши площадки </Nav.Link>
                                    <Nav.Link href="/famcapts"> Семейные капты </Nav.Link>
                                </Nav>
                                <Form inline> 
                                    <FormControl
                                        type="text"
                                        placeholder="Искать"
                                        className="mr-sm-2"
                                    />
                                    <Button variant="outline-info">Искать</Button>
                                </Form>
                            </Navbar.Collapse>
                        </Container>
                    </Navbar>
    
                    <Router>
                        <Routes>
                            <Route path = "/" element = {<Home/>}/>
                            <Route path = "/about" element = {<About/>}/>
                            <Route path = "/contacts" element = {<Contacts/>}/>
                            <Route path = "/famcapts" element = {<FamCapts/>}/>
                        </Routes>
                    </Router>
                </>
            )
        }
    }

В файлах (pages) следующее (приведен Home, в других файлах все также.

import React, { Component } from 'react'

    export default class Home extends Component {
        render() {
            return(
                <div>
                    text
                </div>
            )
        }
     }