Can’t close the Hamburger Menu in ReactJS

I’m trying to close my Hamburger Menu but it did not close, First I initialize and set useState to false,

const [burgerStatus,setBurgerStatus] = useState(false);

And then I created a styled component {BurgerNav} and then pass a parameter show and assigned {burgerStatus} to it.

<BurgerNav show={burgerStatus}>

Then in CSS, I used to transform

transform: ${props => props.show ? 'translateX(0)': 'translateX(100%)'};

Then, in the Hamburger menu, I first create an onClick handler and setBurgerStatus to true, and then I try to click on the menu and it opens successfully.

<CustomMenu onClick={() => setBurgerStatus(true)}></CustomMenu>

But then I create another onClick handler to close the menu but it can’t work

<CloseWrapper> 
     <CustomClose onclick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>

FULL CODE

    const [burgerStatus,setBurgerStatus] = useState(false);
    return (
        <Container>
            <a>
                <img src="/images/logo.svg" alt=""/> 
            </a>
             <Menu>
                <a href="#"> Model S</a> 
                <a href="#"> Model 3</a>
                <a href="#"> Model X</a>
                <a href="#"> Model Y</a> 
             </Menu>
             <RightMenu>
                <a href="#"> Shop</a> 
                <a href="#"> Tesla Account</a> 
                <CustomMenu onClick={() => setBurgerStatus(true)}>
                </CustomMenu>
             </RightMenu>
             <BurgerNav show={burgerStatus}>
                 <CloseWrapper> 
                    <CustomClose onclick={() => setBurgerStatus(false)}>
                    </CustomClose>
                 </CloseWrapper>
                 <li><a href="#">Existing Inventory</a></li>
                 <li><a href="#">Used Inventory</a></li>
                 <li><a href="#">Trade-in</a></li>
                 <li><a href="#">Cyber truck</a></li>
                 <li><a href="#">Roadster</a></li>
             </BurgerNav>
        </Container>

Answer

i see there is a syntax error in your code

<CloseWrapper> 
     <CustomClose onclick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>

Change here onclick to onClick

<CloseWrapper> 
     <CustomClose onClick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>

It must work then, please give some support if my answer helps and accept it as the answer.