Expected behavior side nav working Actual behavior getting "Invariant failed: You should not use outside a " with sidenav form mdbPro. Resources (screenshots, code snippets etc.) index.js:

  <SideNav></SideNav>
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/users/:id" component={UserPage} />
    <Route path="/users" component={UsersPage} />
    <Route path="/roles" component={RolesPage} />
    <Route path="/projects/:id" component={ProjectPage} />
    <Route path="/projects" component={ProjectsPage} />
    <Route path="/messages" component={Messages} />
    <Route path="" component={NotFoundPage} />
  </Switch>
  <Modal></Modal>
  <Notification></Notification>
  {/* <Footer /> */}
  <GlobalStyle />
</AppWrapper>

app.js: {/* */}

      {/* </SideNav> */}
    </ConnectedRouter>
  </LanguageProvider>
</Provider>,