React history.push() is updating url but not rendering the page?

Question

Problem:

In my react application I am using a browser history object. This my index.js file.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/app/App';
import reportWebVitals from './reportWebVitals';
import store from './store';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css';
// import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <Provider store={store}>
            <App />
        </Provider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint
reportWebVitals(console.log);
// serviceWorker.unregister();

This is my App.js file.

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import refreshToken from '../../store/actions/refreshToken';
import routes from '../../routes';
import history from '../../utils/history'

const App = () =>{
    refreshToken();
    return (
        <Router history={history}>
          <Switch>
            {routes.map(
              (route, index) => (
                <Route
                  key={index}
                  exact={route.exact}
                  path={route.path}
                  component={route.layout(route.component, route.breadcrumbs)} />
              )
            )}
          </Switch>
        </Router>
    )
}

export default App;

this is my history.js file.

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

This is my route files.

import DefaultLayout from './layouts/DefaultLayout';
import LoginLayout from './layouts/LoginLayout';
import LoginView from './views/login/Login';
import SearchView from './views/search/Search';

const routes = [
    {
        path: `${process.env.PUBLIC_URL}/`,
        exact: true,
        layout: LoginLayout,
        component: LoginView,
    },
    {
        path: `${process.env.PUBLIC_URL}/search`,
        exact: true,
        layout: DefaultLayout,
        component: SearchView,
    },
]

export default routes;

This is how I have used history in my login component.

import React, { useEffect,useState } from "react";
import "./login.css";
import { connect } from "react-redux";
import { Formik, Form } from "formik";
import * as Yup from "yup";
import { Button, Alert } from "react-bootstrap";
import { useHistory,withRouter } from 'react-router-dom';
import { loginActions } from "../../store/actions";
import logo from "../../assets/img/logo.png";
import Toast from '../../components/toast/ToastView';

const handleSubmit = (values, userLogin) => {
  const userdata = {
    email: values.username,
    password: values.password,
  };
  userLogin(userdata);
};

const Login = (props) => {
  const [showToast, setShowToast] = useState(false);
    const [showErrorToaster, setShowErrorToaster] = useState(false);
  useEffect(() => {
    if (props.success) {
      setShowToast(true);
      setTimeout(()=>{
        setShowToast(false)
        props.history.push(`${process.env.PUBLIC_URL}/search`);
      },2000)
    }
    if(props.error){
      setShowErrorToaster(true);
    }
  }, [props.error, props.success,props.history]);
  return (
    <>
     {/*my other codes8*/}
    </>
  );
};

const mapStateToProps = (state) => {
  return {
    //my state code
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    //my action code
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Login));

What is happening here is after login is succeeded it is updating the URL in the browser but it is not rendering the component. I have to again refresh again. So I look in the following questions given answers too. But the only working solution is to add a force refresh feature to browser history. But it will fully load the component gain and again. So can someone guide me to solve this issue without adding that force refresh feature? Questions I have followed are here. how to access history object in new React Router v4 .https://stackoverflow.com/questions/64534429/history-push-is-changing-url-but-not-rendering-component-in-react.https://stackoverflow.com/questions/43279135/reactjs-router-v4-history-push-not-working. If someone guides me with this it is really helpful. Thank you