React redirects after successful login , but page doesn't get updated until refreshing

I have a problem with routing. I have a login page, where, after successfully logging in, the user must be redirected to the main page. Actually it changes the path in browser and redirects, but the page loads after refreshing it. I miss something with routing, but can't manage to solve it now. This happens also when I am logging out from the app. This is my routing system

import React from 'react';
import {Switch, Route, Redirect, BrowserRouter} from 'react-router-dom';
import Home from '../components/home';
import _ from 'lodash';
import Header from '../components/header';
import LeftSidebarMenu from '../components/left-sidebar-menu';
import CreateCategory from '../components/categories/create-category';
import MainLayout from '../layouts/main-layout';
import Login from '../components/login';
import {MAIN_PATH, CREATE_CATEGORY, LOGIN_PAGE} from '../configs/constants';
import {StorageManager} from '../helpers/utilities';
import ProtectedRoute from '../helpers/services/auth';

const Routes = () => {
    const isLoggedIn = StorageManager.get('session');

    const appSwitch = () => (
        <Switch>
            <Redirect exact from="/" to="/categories" />
            <ProtectedRoute exact path={CREATE_CATEGORY} component={CreateCategory} isAuth={isLoggedIn} />
            <ProtectedRoute exact path={MAIN_PATH} component={Home} isAuth={isLoggedIn} />
            <ProtectedRoute exact path={CREATE_CATEGORY} component={CreateCategory} isAuth={isLoggedIn} />
        </Switch>
    );
    console.log('inside route');
    return (
        <>
            <div className="background"></div>
            <BrowserRouter>
                {_.cond([
                    [(val) => !_.isEmpty(val), _.constant(
                        <MainLayout>
                            <Header  />
                            <LeftSidebarMenu />
                            <main className="main-container">
                                {appSwitch()}
                            </main>
                         </MainLayout>,
                    )],
                    [_.stubTrue, _.constant(
                        <div className='login-page'>
                            <Switch>
                                <Route exact path={LOGIN_PAGE} component={Login} />;
                            </Switch>
                        </div>,
                    )],
                ])(isLoggedIn)}
            </BrowserRouter>
        </>
    );
};

export default Routes;

And this is my login page

import React from 'react';
import {shallowEqual, useSelector, useDispatch} from 'react-redux';
import FormGroup from '../../components/core/form/form-group';
import Button from '../../components/core/button';
import useForm from '../../helpers/custom-hooks';
import {signInRequest, clearActionResultAdmin} from '../../redux/actions';
import {showAlert} from '../../helpers/services/alert';

const Login = (props) => {
    const dispatch = useDispatch();
    const actionResult = useSelector((state) => state.admin.actionResult, shallowEqual);
    const {handleInputChange, handleSubmit} = useForm(signInRequest);

    if(actionResult && actionResult.type === 'success'){
        props.history.push('/categories');
    } else if(actionResult && actionResult.type === 'error') {
        showAlert({
            type: actionResult.type,
            title: 'LOGIN FAILED',
            text: 'Incorrect login or password',
            onClose: () => dispatch(clearActionResultAdmin()),
        });
    }

    return (
        <form onSubmit={handleSubmit}>
            <div className="login-page__container">
                <FormGroup className='form-group__login'>
                    <h3>Login</h3>
                    <input
                        required={true}
                        type="text"
                        placeholder="Login"
                        name="login"
                        className='form-input form-input__full'
                        onChange={handleInputChange}
                    />
                    <h3>Password</h3>
                    <input
                        required={true}
                        type="password"
                        placeholder="Password"
                        name="password"
                        className='form-input form-input__full'
                        onChange={handleInputChange}
                    />
                    <Button
                        type='submit'
                        text='Login'
                    />
                </FormGroup>
            </div>
        </form>
    );
};

export default Login;

It also throws an error in the console after submitting the login form.

index.js:1375 Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. in Login (created by Router.Consumer) in Router.Consumer (created by Route) in Route (at routes/​index.js:44) in Routes (at App.js:19) in App (at src/​index.js:5)

I have also noticed one more thing, that I have missed. I added console.log('inside route'); and it gets called only once when the login page loads.

So how to handle this situation? Or am I forced to change the routing mechanism?