I dont know why when i try to fetch data from api using redux (i can see the data in when i mapstatetoprops ) but this error (user is null ) message show up when i try to display data to user. this is a screenshot shown the user is null error I call the dispatch from componentDidMount react, i think its the right place to call api,

this is my code :

import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { connect } from 'react-redux';
import store from './state/store';
import { loadUser } from './state/actions/auth/authActions';

//pages
import Login from './app/auth/Login';
import Wrapper from './wrapper/Wrapper';

class App extends Component {

  componentDidMount() {
    store.dispatch(loadUser());
  }

  render() {
    const { token, user, isLoading } = this.props.auth
    return (
      <Router>
        <Routes>
          <Route path='/login' element={<Login />} />
          <Route path='/' element={token ? <Wrapper user={user._id} isLoading={isLoading}></Wrapper> : <Login />} />
        </Routes>
      </Router>
    )
  }
}

const mapStateToProps = state => {
  return {
    auth: state.auth
  }
}

export default connect(mapStateToProps, { loadUser })(App);