Реагировать на ввод меню: проверено

Question

Я работаю с бургер-меню в React, но что-то не так, но я не знаю почему. У меня просто есть элемент с: флажок, если это проверено, чем моя боковая панель получает ширину 60%, но это не работает.

стиль. css

.menu-small {
    width: 0;
    background: yellow;
    position: fixed;
    right: 0;
    top: 0;
    margin: 0;
    height: 100vh;
    z-index: 9999999;
    display: block;
}

.menu-btn:checked ~ .menu-small {
    width: 60% !important;
    background: white;
}

И я есть компонент burgerMenu

const burgerMenu = () => {
  return (
    <div className={'burger-icon'}>
        <input type={'checkbox'} className={'menu-btn'} id={'menu-btn'}/>
        <label className="menu-icon" htmlFor="menu-btn"><span className="navicon"/></label>
    </div>
  )
};

И наконец у меня есть мой заголовок. js

<div className={'container'}>
   {tabletMobileDevice && <>
                <div className={'float-right links menu-small'}>
                    <Link to="/" className={'link'} activeClassName={'active'}>Home</Link>
                    <div className={'dropdown'}>
                        <Link to="/shopware/" className={'link'} activeClassName={'active'}>Shopware</Link>
                        <div className={'dropdown-content'}>
                            <Link to="/shopware/introductie-shopware-6" className={'link'} activeClassName={'active'}>Introductie
                                van Shopware 6</Link>
                            <Link to="/shopware/shopware-iconen" className={'link'} activeClassName={'active'}>Shopware
                                Iconen</Link>
                            <Link to="/shopware/veelgestelde-vragen" className={'link'} activeClassName={'active'}>Veelgestelde
                                vragen</Link>
                            <Link to="/shopware/plugin-van-de-maand" className={'link'} activeClassName={'active'}>Plugin
                                van de maand</Link>
                        </div>
                    </div>
                    <div className={'dropdown'}>
                        <Link to="/ontwikkeling/" className={'link'} activeClassName={'active'}>Ontwikkeling</Link>
                        <div className={'dropdown-content'}>
                            <Link to="/ontwikkeling/api-koppeling" className={'link'} activeClassName={'active'}>API
                                Koppeling</Link>
                            <div className={'sub-dropdown'}>
                                <Link to="/ontwikkeling/plugins" className={'link submenu-plugins'}
                                      activeClassName={'active'} style={{
                                    display: 'inline-block'
                                }}>Plugins</Link>
                                <div className={'sub-dropdown-content'}>
                                    <Link to="/ontwikkeling/plugins/advanced-sidebar-menu/" className={'link'}
                                          activeClassName={'active'}>Advanced sidebar menu</Link>
                                    <Link to="/ontwikkeling/plugins/listing-banner/" className={'link'}
                                          activeClassName={'active'}>Listing Banner</Link>
                                    <Link to="/ontwikkeling/plugins/image-carousel/" className={'link'}
                                          activeClassName={'active'}>Image Carousel</Link>
                                    <Link to="/ontwikkeling/plugins/jupa-koppeling/" className={'link'}
                                          activeClassName={'active'}>Jupa Koppeling</Link>
                                    <Link to="/ontwikkeling/plugins/topbar-dropdown-usp/" className={'link'}
                                          activeClassName={'active'}>Topbar Dropdown USP</Link>
                                </div>
                            </div>
                            <Link to="/ontwikkeling/thema" className={'link'} activeClassName={'active'}>Thema</Link>
                        </div>
                    </div>
                    <div className={'dropdown'}>
                        <Link to="/contact/" className={'link'} activeClassName={"active"}>Contact</Link>
                        <div className={'dropdown-content'}>
                            <Link to="/contact/support/" className={'link'} activeClassName={'active'}>Support</Link>
                        </div>
                    </div>
                </div>
            </>}
            <Button />
        </div>

Кто-нибудь знает проблему?

Буду признателен ваша помощь.