How to use the semantic-ui-react.Sidebar.Pushable function in semantic-ui-react

import styled, {css} from 'styled-components'
import {Dimmer, Sidebar} from 'semantic-ui-react'

export const SidebarSemanticPushable = Sidebar.Pushable
export const SidebarSemanticPusherStyled = styled(Sidebar.Pusher)`
	height: 100%;
	-webkit-overflow-scrolling: touch;
	${({isloggedin, ismobile}) => {
		// using `ismobile` attr instead of `media` util is much smoother
		return (
			isloggedin &&
			!ismobile &&
			css`
				max-width: calc(100% - 150px);
				`
		)
	}};
`

export const PageLayout = styled.div`

} from "semantic-ui-react";
import Side from "./components/sidebar/Sidebar";
import ProjectPreference from "./components/preference/Preference";
import Endpoint from "./store/endpoint/Endpoint";
import IntroDialog from "./components/IntroDialog/IntroDialog";
import AppStore from "./store/AppStore";
import ViewStore from "./store/ViewStore";
import { ProjectStore } from "./store/ProjectStore";
import Preference from "./store/Preference";
import { Notification } from "./store/NotificationStore";
import Notify from "./components/Notification";
import RemoteDeploy from "./components/RemoteDeploy";
import BindShortcuts from "./Shortcuts";
import CloseConfirmation from "./components/CloseConfirmation";

const Pushable = styled(Sidebar.Pushable)`
  overflow-x: visible !important;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
`;

const WideSidebar = styled(Sidebar)`
    width: 200px !important;
`;

interface IHome {
  state?: AppStore;
  view?: ViewStore;

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

    return (
      
        
          
            Color Pic
          
          
            Generate

render() {
    const { children } = this.props;
    const { sidebarOpened } = this.state;
    const { handleSignIn } = this.props;
    return (
      
        
          
            Home
          

          Log in

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

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

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

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

  return (
    
      
        主页
        题库
        比赛
        小组
        状态

function MobileContainer(props) {
    const [ sidebarOpened, setSidebarOpened ] = useState(false);

    return (
        
             setSidebarOpened(false)} vertical visible={sidebarOpened}>
                Home
                Dummy
            

            
                
                    
                        <menu size="large">
                             setSidebarOpened(true)}&gt;
                                
                            
                            </menu>