Material ui Temporary Drawer スマホサイズの時に何も表示されない。

Question

material uiを用いてナビゲーションのレスポンシブデザインにチャレンジしています。HiddenとDrawerを用いて行おうとしているのですがスマホサイズの時に何も表示されなくて困っています。デベロッパーツールで見ると何も表示がされていないことが分かりました。Drawerのvarinantがtemporaryだとこのような状態になります。なぜでしょうか。皆さんの知恵をお貸しください。

<div className="sidebarIn">
            <Hidden mdUp implementation="css">
                <Drawer
                anchor="left"
                variant="temporary"
                open={props.open}
                classes={{
                    paper: classes.drawerPaper
                }}
                onClose={props.handleDrawerToggle}
                ModalProps={{
                    keepMounted: true // Better open performance on mobile.
                }}
                >
                    <IconButton onClick={props.handleDrawerToggle}>
                        <CloseIcon />
                    </IconButton>
                    <div className={classes.sidebarWrapper}>
                        <Links />
                    </div>
                </Drawer>
            </Hidden>
            <Hidden smDown implementation="css">
                <Drawer
                anchor="left"
                variant="permanent"
                open
                classes={{
                    paper: classes.drawerPaper
                }}
                >
                    <div className={classes.sidebarWrapper}>
                        <Links />
                    </div>
                </Drawer>
            </Hidden>
        </div>