Не отрисовывается компонента в React

Принцип функционала: есть страница юзеров полученная с API. При нажатии какого то из юзеров происходит переход с помощью Navlink. При переходе должна появиться страница юзера, но в итоге пусто и сама компонента не появляется. Возможно проблема с Navlink т к указал неправильный путь переход NavLink:

<NavLink to={'/profile/' + u.id}>
<div className={s.card}>
  <img  className={s.card_img} src={userPhoto} alt="avatar" />
<div className={s.card_text}>
  <div>
   
<p className={s.card_name}>{u.name}</p>
<p>1 общий друг</p>
</div>
<div>
  
{
// МЕСТО С ОТОБРАЖЕНИЕМ КАРТИНОК
u.followed 
? <button className={s.adduser}  onClick={() => {props.unFollowow(u.id)}}><img className={s.adduser} src="https://www.svgrepo.com/show/487269/delete-profile.svg" alt="u" /></button>   
: <button className={s.adduser}  onClick={() => {props.follow(u.id)}}><img className={s.adduser}  src="https://www.svgrepo.com/show/47844/add-friend.svg" alt="f" /></button>  }
</div>


</div>
</div>
</NavLink>
Контейнерная компонента для юзера:
<img src="https://habrastorage.org/webt/65/b0/18/65b01867d271e647921946.png" alt="image"/>
Контейнерная компонента профилю юзера:
<img src="https://habrastorage.org/webt/65/b0/18/65b018a748156698866669.png" alt="image"/>

Контейнерная компонента я профиля юзера:

import React from "react";
import Profile from "./Profile";
import { setProfile } from "../../redux/profile-reducer";
import { connect } from "react-redux";
import axios from "axios";

class ProfileContainer extends React.Component {
   
    componentDidMount() {
   
        axios.get(`https://social-network.samuraijs.com/api/1.0/profile/2`)
      
        .then(response => {  
            this.props.setProfile(response.data.items);
      
        })
      };
      


    render() {
        return (

<Profile {...this.props}  profile={this.props.profile} />

        ) 
        
        

        
    }
   
}
let mapStateToProps = (state) => {
    debugger
return {  
   profile: state.state.profile
}
  
};

export default connect(mapStateToProps, {setProfile})(ProfileContainer)

и App.js с роутерами:

import './App.css';
import Header from "./components/Header/Header"
import Navbar from "./components/Navbar/Navbar"
import ProfileContainer from './components/Profile/ProfileContainer';
import Dialogs from './components/Dialogs/Dialogs'
import UserContainer from './components/User/UserContainer';
import {BrowserRouter, Routes, Route} from "react-router-dom";
import store from './redux/redux-store';

function App(props) {

  return (
   
    <>  
    <BrowserRouter>
    <div className='containerHtml'>
    <Header/>
    <section className='glav'>
<Navbar/>
<Routes>

<Route path='/dialogs' element={  <Dialogs state={props.state}  />}/>
<Route path='/profile' element={<ProfileContainer />}/>

<Route path='/user' element={<UserContainer />}/>
</Routes>


</section>
</div>  
</BrowserRouter>
    </>
  );
}

export default App;