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

const playerHeight = 90;
  const containerHeight = `calc(100vh - ${topbarHeight}px - ${playerHeight}px)`;

  return (
    <div>
      
        
          
        
        
          
        
      

      
        

        
          {/*  */}</div>

if (i < southDestinations.length - 1) {
        return result.concat([childEl, separator]);
      }
      return result.concat(childEl);
    }, []);
    const northDestinationsFormatted = northDestinations.reduce((result, child, i) => {
      const childEl = (<span>{child}</span>);
      const separator = (<span>, </span>);
      if (i &lt; northDestinations.length - 1) {
        return result.concat([childEl, separator]);
      }
      return result.concat(childEl);
    }, []);
    return(
      <div>
         Responsive.onlyTablet.maxWidth}&gt;
          
            
              
                <header color="{unScheduledDestinationsSouth.length">
                  {southDestinationsFormatted.length &gt; 0 &amp;&amp; "To "}
                  {(southDestinationsFormatted.length &amp;&amp; southDestinationsFormatted )|| "--"}
                </header>
              
              
                <header>
                  Lines
                </header>
              
              
                <header color="{unScheduledDestinationsNorth.length">
                  {northDestinationsFormatted.length &gt; 0 &amp;&amp; "To "}</header></div>

if (this.map.getLayer(l)) {
          if (!includeTrains || !stationsData.some((station) => station.stops.has(t))) {
            this.map.setPaintProperty(l, 'line-opacity', 0.1);
          } else {
            this.map.setPaintProperty(l, 'line-opacity', 1);
          }
        }
      });
    });

    if (selectedStations.length === 1) {
      const stationData = stations[selectedStations[0]];
      let coords = [stationData.longitude, stationData.latitude];
      if (width < Responsive.onlyTablet.minWidth) {
        coords = [coords[0] + 0.002, coords[1] + 0.004];
      } else if (width <= Responsive.onlyTablet.maxWidth) {
        coords = [coords[0] - 0.005, coords[1] + 0.001];
      }
      this.map.easeTo({
        center: coords,
        zoom: 15,
        bearing: 29,
      });
    } else {
      const coordinatesArray = selectedStations.map((s) => [stations[s].longitude, stations[s].latitude]);
      const bounds = coordinatesArray.reduce((bounds, coord) => {
        return bounds.extend(coord);
      }, new mapboxgl.LngLatBounds(coordinatesArray[0], coordinatesArray[0]));

      this.map.fitBounds(bounds, {
        padding: {
          top: (width >= Responsive.onlyTablet.minWidth) ? 20 : 140,

<header size="medium">DELAYED TRAINS</header>
        

        
          
            
              
                
                  
                    Last 24 hrs
                    {this.props.stats.delays.last_day.count}
                  
                
                
                  
                    {this.props.stats.delays.last_day.avg_mins} mins
                    Avg Duration
                  
                  
                    {this.props.stats.delays.last_day.max_mins} mins
                    Longest Duration
                  
                
              
              
                
                  
                    Last week
                    {this.props.stats.delays.last_week.count}

function DesktopContainer(props) {
    const [ fixed, setFixed ] = useState(false);

    return (
        
             setFixed(true)}
                onBottomPassedReverse={() => setFixed(false)}
            >
                
                    <menu size="large">
                        
                            /
                            Haberler

                            
                                
                                    Başlarken
                                    Katkı Sağlamak
                                    Yeni Proje Başlatmak</menu>

const getWidth = () => {
  const isSSR = typeof window === "undefined";

  return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth;
};

render() {
    const { stations, station, trains } = this.props;
    const { fav } = this.state;
    const title = `the weekendest beta - ${ station.name.replace(/ - /g, "–") }${ station.secondary_name ? ` (${station.secondary_name})` : ""} Station`;
    return (
      
        
          <title>{title}</title>
          
          
          
          
          
        
        
          <button title="Back">
            
          </button>
          <button title="Home">
            
          </button>
          {
            this.renderOverlayControls()
          }
          <button title="{">
            
          </button>
          { navigator.share &amp;&amp;
            <button title="Share" style="{{float:">
              
            </button>

const DesktopContainer = (props: ContainerProps & React.Props) => {
  const [fixed, setFixed] = React.useState(false);

  const hideFixedMenu = () => setFixed(false);
  const showFixedMenu = () => setFixed(true);
  const { children } = props;

  return (
    

return (
      
        
          
            
              {children
              }
          
        
        
          
          
            
              
                
                  
                
                
                  { displayNavTitle &&
                    <header>{title}</header>
                  }
                  {children}

getWidth = () => {
        const isSSR = typeof window === 'undefined';
        return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth;
    }