React-router-dom Link

только начал изучать React и не могу уже два дня решить проблему. При переключение дочернего линка(в другом компоненте) не прорисовывается родитель

import React, { Profiler } from 'react';
import './App.css';
import Dialogs from './components/Dialogs/Diaologs';
import Header from './components/Header/Header';
import Navbar from './components/Navbar/Navbar';
import Profile from './components/Profile/Profile';
import { BrowserRouter, Routes, Route,Link} from "react-router-dom";
import Music from './components/Music/Music';
import News from './components/News/News';
import Setting from './components/Setting/Setting';



const App = () => {
  return (
    <BrowserRouter>
 
      <div className='app-wrapper'>
        <Header />
        <Navbar />
        <div className="app-wrapper-content">
         
          <Routes>
            <Route exact path="/dialogs" element={<Dialogs />} />
            <Route path="/profile" element={<Profile />} />
            <Route path="/music" element={<Music />} />
            <Route path="/news" element={<News />} />
            <Route path="/setting" element={<Setting />} />
            
          </Routes>
        
        </div>
        
      </div>
      
    </BrowserRouter>
  

  )
}

export default App;

А в этом компоненте не отрисовывается контент хоть URL меняется. Должно просто переключаться по ссылкам а контент оставаться с

import React from 'react';
import { Link, Outlet } from 'react-router-dom';
import s from "./Dialogs.module.css";


const DialogItem = (props) => {

    let path = "/dialogs/" + props.id;
    return (
        <div>
            <nav className={s.dialog + " " + s.active}>
                <Link exact to={path}>{props.name}</Link>
            </nav>
        <Outlet />
     </div>
    )
}

const Message = (props) => {
    return (
        <div className={s.dialog}>
            {props.message}
        </div>

    )
}



const Dialogs = () => {
    return (
        <div className={s.dialogs}>
            <div className={s.dialogsItem}>
                <DialogItem name="Alex" id="1" />
                <DialogItem name="Dasha" id="2" />
                <DialogItem name="Oleg" id="3" />
                <DialogItem name="Tamara" id="4" />
                <DialogItem name="Igor" id="5" />
                <DialogItem name="Lisa" id="6" />
            </div>
            <div className={s.messages}>
                <Message message="Yo" />
                <Message message="hop" />
                <Message message="Yo" />
            </div>


        </div>

    )
}

export default Dialogs;