export default connect( mapStateToProps )( withRouter( app) ) not passing mapStateToProps to next component

Question

I want to pass mapStateToProps value to next component while using withRouter so that i can maintain this.props.history also. Here is my code.

import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';

class MyApp extends React.Component {
    constructor ( props ) {
        super( props );
        this.state = {}
    }

    componentDidMount = () => {
        // it is printing empty array i.e. []
        console.log( " this.props.userDetails ", this.props.userDetails )
    }
    routeChange = () => {
        let path = `/someurl`;
        this.props.history.push( path );
    };

    render() {
        return <div>
            <button class="btn btn-secondary"
                data-target="#add"
                id="addnew"
                onClick={ this.routeChange }
            >
        </div>
    }
}
const mapStateToProps = state => {
    return {
        userDetails: state.UserDetailsReducer.userDetails
    };
};
export default withRouter( connect( mapStateToProps )( MyApp ) );

I tried both

export default connect( mapStateToProps )( withRouter( MyApp ) ); 

and

export default withRouter( connect( mapStateToProps )( MyApp ) );

and

export default compose(  withRouter,  connect( mapStateToProps ))( App );

but the value is empty array. Here is another file.

import React, { Fragment, useState, useEffect } from 'react';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import UserDetails from '../store/Actions/UserDetails'; 

const NavigationBar = (props) => {
    useEffect(() => {
        fetch(`###REACT_APP_PLATFORM_URL###/access/userinfo`, requestOptions)
            .then(response => {
                if (response.status != 200) { setisError(true) }
                return response.json();
            })
            .then((findresponse) => {
                if (findresponse.msg) { setstatus(findresponse.msg) }
                else {
                    setcheckName(findresponse);
                    props.getUserDetails(findresponse) 
                }
            })
            .catch(error => { });
    }, []); 
};
const mapStateToProps = (state) => {
    return {
        userDetails: state.UserDetailsReducer.userDetails
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getUserDetails: (user) => dispatch(UserDetails(user))
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(NavigationBar);