title: Ant Design with React, menu does not render on mobile
body: <p>I have this app with AntDesign css framework and the sidebar menu does not render into the DOM on mobile view eg. responsive view in developer(after refresh) or on mobile phone. 
  On desktop everything works as expected.
  What causes the problem?</p>
  
  <p>You can see whole app at: <a href="https://github.com/arekrgw/supladevicesinstall" rel="nofollow noreferrer">https://github.com/arekrgw/supladevicesinstall</a></p>
  
  <pre><code>import React, {useState} from 'react'
  import {Menu, Icon} from 'antd';
  import {Link} from 'react-router-dom'
  import history from '../history'
  import { connect } from 'react-redux'
  
  const SubMenu = Menu.SubMenu
  
  const SideBar = (props) =&gt; {
    const currentSlug = history.location.pathname.split('/')[1] || 'welcome'
    const [current, setCurrent] = useState(currentSlug)
  
    const renderMenu = () =&gt; {
      return props.menu.map((menuItem) =&gt; {
        return &lt;Menu.Item key={menuItem.slug}&gt;&lt;Link to={`/${menuItem.slug}`}&gt;{menuItem.title}&lt;/Link&gt;&lt;/Menu.Item&gt;
      })
    }
    return (
      &lt;Menu
        theme="dark"
        onClick={(e) =&gt; setCurrent(e.key)}
        selectedKeys={[current]}
        mode="inline"
        defaultOpenKeys={['other']}   
      &gt;
        &lt;SubMenu key="other" title={&lt;span&gt;&lt;Icon type="home" /&gt;&lt;span&gt;Ogólne&lt;/span&gt;&lt;/span&gt;}&gt;
          &lt;Menu.Item key="welcome"&gt;&lt;Link to="/"&gt;Home&lt;/Link&gt;&lt;/Menu.Item&gt;
          &lt;Menu.Item key="software"&gt;Wstęp (ważne)&lt;/Menu.Item&gt;
        &lt;/SubMenu&gt;
          {/* Render Menu z API i inteligentne uzywanie slugow */ }
          {renderMenu()}
  
      &lt;/Menu&gt;
    )
  }
  
  const mapStateToProps = (state) =&gt; ({
    menu: state.menu
  })
  
  export default connect(mapStateToProps)(SideBar)
  </code></pre>
  
  <pre><code>import React from 'react'
  import { Layout } from 'antd'
  import SideBar from './SideBar'
  import HeaderStyled from './HeaderStyled'
  import {Router, Route} from 'react-router-dom'
  
  import FooterDetails from './FooterDetails'
  import history from '../history'
  import MainContentRoute from './MainContentRoute'
  
  const { Header, Footer, Sider, Content} = Layout
  
  const App = () =&gt; {
    return (
      &lt;Router history={history}&gt;
        &lt;Layout&gt;
          &lt;Header style={{borderBottom: '1px solid #0e2549'}}&gt;
            &lt;HeaderStyled /&gt;
          &lt;/Header&gt;
          &lt;Layout&gt;
            &lt;Sider collapsedWidth={0} breakpoint="md" width="250px"&gt;
              &lt;SideBar /&gt;
            &lt;/Sider&gt;
            &lt;Content&gt;
              &lt;Route path="/:slug" exact component={MainContentRoute}/&gt;
            &lt;/Content&gt;
          &lt;/Layout&gt;
          &lt;Footer style={{textAlign: 'center', background: "#ddd"}}&gt;
            &lt;FooterDetails /&gt;
          &lt;/Footer&gt;
  
        &lt;/Layout&gt;
      &lt;/Router&gt;
    )
  }
  
  export default App
  </code></pre>