Dynami c SideMenu из базы данных в ReactJS

Question

У меня есть шаблон проекта из основного пользовательского интерфейса, этот проект, который я хочу сделать в боковое меню, - это динамическое c из базы данных. это datamenu выглядит как возврат из API и как я его называю

constructor (){
    super()
    this.state = {
      jsonMenu : [],
      data :[]
    }
  }
componentDidMount(){
    axios.post(URLMenu)
    .then((res)=>{
        this.setState({
          jsonMenu : res.data.data
        })
        console.log(this.state.jsonMenu)
    })

и ответ здесь:

0: {title: "01", name: "Master", url: "/dashboards", icon: "fa-folder"}
1: {title: "02", name: "Transaction", url: "/transactions", icon: "fa-cogs"}

после этого я пытаюсь передать его компоненту следующим образом.

<AppSidebar fixed display="lg">
            <AppSidebarHeader />
              <div>
                <HeadMenu/>
              </div>
              <AppSidebarForm />
                <Suspense>
                  <AppSidebarNav navConfig={this.state.jsonMenu} />
                </Suspense>
              <AppSidebarFooter />
            <AppSidebarMinimizer />
</AppSidebar>
<main className="main">
            <Container fluid>
              <Suspense fallback={this.loading()}>
                <Switch>
                  {routes.map((route, idx) => {
                    return route.component ? (
                      <Route
                        key={idx}
                        path={route.path}
                        exact={route.exact}
                        name={route.name}
                        render={props => (
                          <route.component {...props} />
                        )} 
                      />
                    ) : (null);
                  })}
                  <Redirect from="/" to="/dashboard" />
                </Switch>
              </Suspense>
            </Container>
        </main>

но при этом боковое меню не появляется, я все равно получаю ошибку, я не знаю, как ее решить