Страница отображения маршрута React Router не отображается после добавления нового компонента между Router и Switch

Question

Я реализовал ReactRouter с Route s для моего проекта, но добавление другого родителя в компонент Switch нарушило перенаправление для каждого маршрута.

Корень проблемы - компонент Wrapper. При добавлении этого компонента поверх остальных Router я вообще не могу получить доступ к страницам. Ссылка меняется, но сама страница не перерисовывается. Но когда я удаляю Wrapper и обмениваю его на div, который возвращается этим компонентом, все работает как положено.

Это ошибочная реализация Router.

<HashRouter>
    <Wrapper> {* this fails *}
        <Menu/>
        <Switch>
            <Route exact path="/" component={Dashboard} />
            <Route exact path="/view-project/:id" component={Project} />
            <Route exact path="/create-pr" component={PRSetup}/>
            <Route exact path="/create-ticket" component={TicketSetup}/>
            <Route exact path="/create-cmp" component={CmpSetup}/>
            <Route exact path="/create-project" component={ProjectSetup}/>

            <Route exact path="/edit-component/:id" component={EditComponent}/>
            <Route exact path="/edit-ticket/:id" component={EditTicket}/>
        </Switch>
    </Wrapper> {* this fails *}
</HashRouter>

и это рабочая версия

<HashRouter>
    <div class={"container-fluid px-0 knbn-bg-transparent knbn-transition"}>
        <Menu/>
        <Switch>
            <Route exact path="/" component={Dashboard} />
            <Route exact path="/view-project/:id" component={Project} />
            <Route exact path="/create-pr" component={PRSetup}/>
            <Route exact path="/create-ticket" component={TicketSetup}/>
            <Route exact path="/create-cmp" component={CmpSetup}/>
            <Route exact path="/create-project" component={ProjectSetup}/>

            <Route exact path="/edit-component/:id" component={EditComponent}/>
            <Route exact path="/edit-ticket/:id" component={EditTicket}/>
        </Switch>
    </div>
</HashRouter>

Это реализация Wrapper

.

import React from 'react';

const Wrapper = (props) => {
    return (
        <div class={"container-fluid px-0 knbn-bg-transparent knbn-transition" + (props.themeToggled ? " knbn-dark-bg-1x" : " knbn-snow-bg-1x")}>
            {props.children}
        </div>
    );
}

export default Wrapper;

Я ожидаю, что в обеих ситуациях маршрут будет без проблем.