I have the following component where I am expecting to go to another path via router's push method immediately cos router push is inside the useEffect` hook.

But router push never seems to happen. The ShowLoading component is just a loading screen (shows a loading spinner).

The page is just stuck on the loading spinner screen.

What am I doing wrong, why am I not being pushed to the new page? Pls advice. Thanks.

import React from 'react';
import Cookies from 'js-cookie';
import { ShowLoading } from '../../ShowLoading';
import { withRouter } from 'react-router';

const MyComponent = ({
  router: { push, location },
}) => {
  React.useEffect(() => {    
    // this cookie gets set thus clearly we are entering this useEffect. 
    Cookies.set('temp', '1');

    const value = 'test';
    const params = location.search ? `${location.search}` : '';

    // seems like this has no effect, no pushing and moving to new page path. 
    push(`/${value}/my_path${params}`);

  }, []);
  return (<ShowLoading />);
};

export default (withRouter(MyComponent);

P.S: Goes to a new path as expected if I do the following but looking to do it via a router.

window.location.pathname = `/${value}/my_path${params}`;