Почему ссылки не работают?

import logo from './logo.svg';
import './App.css';
import Header from './components/Header';
import Navbar from './components/Navbar';
import Profile from './components/Profile';
import Dialogs from './components/Dialogs/Dialogs';
import {BrowserRouter, Routes} from 'react-router-dom';

function App() {
    return (
    <BrowserRouter>
    <div className="app-wrapper">
    <Header />
    <Navbar />
    <div className="app-wrapper-content">
    <Routes path="/profile" component={<Profile />} />
    <Routes path="/dialogs" component={Dialogs} />
    </div>
    </div>
    </BrowserRouter>
    );
}



export default App;