How to use the semantic-ui-react.Responsive.onlyMobile function in semantic-ui-react

render () {
    const { children, displayNavTitle, title } = this.props
    const { visible } = this.state

    return (
      
        
          
            
              {children
              }

const MobileContainer = (props: ContainerProps & React.Props) => {
  const [sidebarOpened, setSidebarOpened] = React.useState(false);

  const handleSidebarHide = () => setSidebarOpened(false);

  const handleToggle = () => setSidebarOpened(true);
  const { children } = props

  return (
    
      
        主页
        题库
        比赛
        小组
        状态
        消息
        讨论

renderTable(destinations, headwayData) {
    const { width } = this.props;
    const isMobile = (width <= Responsive.onlyMobile.maxWidth);
    return (
      
          
            
              <header>
                To {destinations.join(', ').replace(/ - /g, "–") || "--"}
              </header>
            
            
              {isMobile ? "Actual" : "Actual Headway"}
            
            
              {isMobile ? "Scheduled" : "Scheduled Headway"}
            
          <table size="{isMobile">
        </table>

render() {
    const { children } = this.props
    const { sidebarOpened } = this.state

    return (
      
        
          
        
        {children}
      
    )
  }
}

render() {
    return (
      
        
          <div id="page-container">
            {this.state.docId &amp;&amp; (
              
            )}
          </div>
        
        
          
            {this.state.docId &amp;&amp; (
              
            )}
          
        
      
    )
  }

render() {
    const { trains, arrivals, routing, stops, timestamp,
      displayProblems, displayDelays, displaySlowSpeeds, displayLongHeadways} = this.state;
    return (
      
        <div> this.mapContainer = el}
          style={{top: 0, bottom: 0, left: 0, right: 0, position: "absolute"}}&gt;
        </div>
        
          { trains.length &gt; 1 &amp;&amp;
            
              
            
          }
          
            <header style="{{padding:" color="yellow">
            
              the weekendest<span id="alpha">beta</span>
            
              
                real-time new york city subway map
              
            </header>

function MobileContainer(props) {
    const history = useHistory();

    const [ sidebarOpened, setSidebarOpened ] = useState(false);

    useEffect(() => history.listen(() => {
        setSidebarOpened(false);
    }));

    return (
        
             setSidebarOpened(false)} vertical visible={sidebarOpened}>
                Ana Sayfa
                Haberler
                
                    Eğitim
                    
                        Başlarken
                        Katkı Sağlamak
                        Yeni Proje Başlatmak
                        Kurumlar İçin
                        Rehber
                        Lisanslar

Scheduled<br>
                Max Wait
              
              
                Traffic Conditions
              
              
                Lines
              
            
          
          
            { this.tableDataMobileSouth() }
          
        
        
          
            
              
                <header color="{unScheduledDestinationsNorth.length">
                  {northDestinationsFormatted.length &gt; 0&amp;&amp; "To "}
                  {(northDestinationsFormatted.length &amp;&amp; northDestinationsFormatted) || "--"}
                </header>
              
            
            
              
                Lines
              
              
                Traffic Conditions

render () {
    const { children } = this.props
    const { visible } = this.state

    return (
      
        
          
            {children}
          
        
        
          
          {children}
        
      
    )
  }