组件不会在状态更改时重新呈现

我陷入了这个烦人的问题，在这个问题中，我只是试图制作一个包含汉堡包和类似内容的导航栏，但是当我单击应该会出现的按钮时，组件不会重新渲染或更新更改组件的状态，并使汉堡包按钮和菜单打开，反之亦然。

import React, {useState} from "react";
import styles from "./Navigation.module.css";
import pin from "./pin.png";
import "./NavFunctions";



function Navigation(props)   {

    let [country, setCountry] = useState("UK");
    let [city, setCity] = useState("London");
    let [response, setResponse] = useState({});
    let [MenuHamburgerToggled, setMenuHamburgerToggled] = useState(false);

        const style = {
            nav: {
                position: "absolute",
                top: "0",
                left: "0",
                width: "100vw",
                height: "150px",
                backgroundColor: "transparent"
            },

            nav_container: {
                flexDirection: "row",
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                margin: "40px 100px",
                color: "white",
            },
            cnc: {
                fontFamily: '"Agency FB", serif',
                fontSize: '30pt',
            },
            hamburgerMenuToggle: {
                width: "30px",
                height: "30px",

            }
        }
        return (
            <React.Fragment>
                <Menu isOpen={MenuHamburgerToggled}/>
                <nav style={style.nav}>
                    <div style={style.nav_container}>
                        <div style={style.cnc}>
                            {country}, {city} <img style={{
                            width: "30px", height: "30px", marginLeft: "10px"
                        }} src={pin} alt="pin"/>
                        </div>
                        <div style={style.hamburgerMenuToggle}>
                            <MenuHamburger toggled={MenuHamburgerToggled} onClick={()=> setMenuHamburgerToggled(!MenuHamburgerToggled)}

                            />
                        </div>
                    </div>
                </nav>
            </React.Fragment>
        )
}

function MenuHamburger(props) {

    let [toggled, setToggled] = useState(props.toggled ? props.toggled : false);

    const handleClick = () => {
         setToggled(!toggled);
    }

    const styles = {
        toggleHamburger: {
            zIndex: "1001",
            cursor: "pointer",
            transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggleHamburger__ic: {
            display: "inline-block",
            cursor: "pointer",
        },
        tg__hr: {
            backgroundColor: "transparent",
            border: "none",
            outline: "none",
            transition: "all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_bir: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            transform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
            WebkitTransform: toggled ? "rotate(-45deg) translate(-7px, 2px)" : "none",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_iki: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            opacity: toggled ? "0" : "1",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },
        toggle_och: {
            width: "30px",
            height: "3px",
            borderRadius: "3px",
            backgroundColor: "#efecff",
            margin: "4px 0",
            transform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
            WebkitTransform: toggled ? "rotate(45deg) translate(-7px, -5px)" : "none",
            transition: " all cubic-bezier(.51,.58,.28,.98) .25s",
        },

    }

        return (
            <div style={styles.toggleHamburger}
            >
                <button style={styles.tg__hr} >
                    <div style={styles.toggleHamburger__ic}>
                        <div style={styles.toggle_bir}></div>
                        <div style={styles.toggle_iki}></div>
                        <div style={styles.toggle_och}></div>
                    </div>
                </button>
            </div>
        )


}

 function Menu(props)  {
    let [isOpen, setIsOpen] = useState(props.isOpen ? props.isOpen : false);

     let styles = {
         Menu_container: {
             width: "100vw",
                 height: isOpen === true ? "100vh" : "0",
                 backgroundColor: "#211113",
                 transition: "all ease 1s"
         }
     }

        return (
            <div style={styles.Menu_container}>

            </div>
        )

}

export default Navigation;