dispatch push changing url but not rendering component

Question

So basically i am doing a post request for login and upon success i want to dispatch the response and redirect the user to profile page.

So dispatch the response works fine but upon doing dispatch(push('/profile')); the URL changes but the profile component doesn't get rendered.

if i simply do below code execution without the axios request it works fine and redirects.

export function logIn(values) {
   return (dispatch) => {
     dispatch({ type: LOGIN_USER, payload: {email: values.email} });
     dispatch(push('/profile'));
   };
 }

Actual code what i want to do. after dispatching the response which works fine and my redux store gets updated but the redirection doesn't work. it changes the url to /profile but the view doesn't changes

import axios from 'axios';
import { push } from 'connected-react-router';

const ROOT_URL = `${process.env.REACT_APP_SERVER_PATH}`;
export const LOGIN_USER = 'LOGIN_USER';

export function logIn(values) {
  const url = `${ROOT_URL}/login`;
  const request = axios({
    method: 'POST',
    url: url,
    data: values,
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  });
  return (dispatch) => {
    request.then((response) => {
      dispatch({ type: LOGIN_USER, payload: response.data.user });
      dispatch(push('/profile'));
    })
    request.catch((error) => {
      // do something
    })
  };
}

ConfigStore:

import { createBrowserHistory } from 'history';
import { createLogger } from 'redux-logger';
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/es/storage'
import thunk from 'redux-thunk'
import createRootReducer from './reducers'

export const history = createBrowserHistory();

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['auth'] // can eention specific data root name

};

const reducers = persistReducer( persistConfig, createRootReducer(history));

export default () => {
  const store = createStore(
    reducers,
    composeEnhancers(applyMiddleware(routerMiddleware(history), thunk, createLogger()))
  );
  let persistor = persistStore(store)

  return  { store, persistor }
}