React Router V5 How to have links to nested and parent router? Adding Redux messes with Routing

Question

I have a page which uses React Router V5. There is a general section and there is a section specifically for user profiles. As I have a different page structure there, I used nested routes for the account section. The SideBar is what the name implies and contains buttons which can be used to navigate the account pages /account/profile, /account/settings, as well as navigate to pages outside the nested switch - namely /help.

The App used to be structured roughly like this:

// in index.js
const appDiv = document.getElementById("app")
render(<App />, appDiv)

// in App.js
const App = () => {
    return (
        <Router>
        <div className={styles.pageContainer}>
            <Header />
            <Switch>
                <Route exact path='/' component={() => <HomePage link='about' />} />
                <Route path='/about' component={AboutPage} />
                <Route path='/help' component={HelpPage} />
                <Route path='/log-in' component={LoginPage} />
                <Route path='/sign-up/:signupType' component={SignUpPage} />
                <Route path='/account' component={AccountRouter} />
            </Switch>
            <Footer />
        </div>
    </Router>

}

// in AccountRouter.js
const AccountRouter = () => {
    return (
        <div className={styles.container}>
            <SideBar />
            <Switch>
                <Route path='/account/settings' component={AccountSettingsPage} />
                <Route path='/account/profile' component={ProfileSettingsPage} />
                <Route exact path='/account' component={ProfileSettingsPage} />
            </Switch>
        </div>
    );
};

// in SideBar.js
const SideBar = () => {
    const history = useHistory();

    return (
        <div>
            <button onClick={() => history.push('/account/profile')}>Go to Account Profile</button>
            <button onClick={() => history.push('/account/settings')}>Go to Account Settings</button>
            <button onClick={() => history.push('/help')}>Go to Help Page</button>
        </div>
    )
}

Now it is structured like this:

// in index.js
const appDiv = document.getElementById("app")
render(
    <Provider store={store}>
        <App />
    </Provider>
, appDiv)

// in App.js
// This looks the same

// in AccountRouter.js
// This now has Route protection
const AccountRouter = () => {
    const accountData = useSelector((state) => state.account);

    return (
        <div className={styles.container}>
            {!accountData.isLoggedIn ? <Redirect to='/log-in' /> : null}
            <SideBar />
            <Switch>
                <Route path='/account/settings' component={AccountSettingsPage} />
                <Route path='/account/profile' component={ProfileSettingsPage} />
                <Route exact path='/account' component={ProfileSettingsPage} />
            </Switch>
        </div>
    );
};

// in SideBar.js
// This looks the same.

Before I added Redux, the Sidebar was properly redirecting. After Redux, I have the following behaviour: When the SideBar is outside of the Switch, you can properly navigate to the Help page, but the components don't render, when I try to navigate to the pages inside the AccountRouter Switch. When I move the SideBar into the Switch, the links to the pages inside this switch start working again, but the /help link stops working.

Is there a way of having links to both inside and outside of this Switch in the same SideBar? How could Redux have affected the Router?