Hamburger menu will not close when LINK is clicked REACT - reactjs

Question

I built a mobile nav hamburger dropdown. The NavMobile links are added to the dropdown in a seperate component. When I try to click on a link in the dropdown it will scroll to the proper section of the page but the mobile dropdown will have to be manually closed which is not what I was hoping for.
Here is the code in the header component:
import React, { useState, useEffect } from "react";
// import data
import { headerData } from "../data";
//import components
import Nav from "./Nav";
import NavMobile from "./NavMobile";
import Socials from "./Socials";
//import icons
import { TiThMenu } from "react-icons/ti";
const Header = () => {
//destructure header data
const { logo } = headerData;
//header state
const [isActive, setIsActive] = useState(false);
//nav mobile state
const [navMobile, setNavMobile] = useState(false);
//scroll event
useEffect(() => {
window.addEventListener("scroll", () => {
window.scrollY > 50 ? setIsActive(true) : setIsActive(false);
});
});
return (
<header
className={`${
isActive ? "h-[100px] lg:h-[110px] shadow-lg" : "h-[120px] lg:h-[150px]"
} fixed bg-white left-0 right-0 z-10 max-w-[1920px] w-full mx-auto transition-all duration-300`}
>
<div className="flex justify-between items-center h-full pl-[50px] pr-[60px]">
{/* logo */}
<a href="/">
<img className="w-[188px] h-[90px]" src={logo} alt="Tara Zep Logo" />
</a>
{/* nav hidden mobile*/}
<div className="hidden xl:flex">
<Nav />
</div>
{/* nav menu btn hidden desktop*/}
<div
onClick={() => setNavMobile(!navMobile)}
className="xl:hidden absolute right-[5%] bg-white text-dark p-2 rounded-md cursor-pointer"
>
<TiThMenu className="text-3xl" />
</div>
{/* nav mobile */}
<div
className={`${navMobile ? "max-h-full" : "max-h-0"} ${
isActive
? "top-[100px] lg:top-[110px]"
: "top-[120px] lg:top-[150px]"
} fixed bg-white w-full h-full left-0 -z-10 transition-all duration-300`}
>
<NavMobile onClick={() => setNavMobile(!navMobile)}/>
</div>
{/* social icons hidden show on desktop */}
<div className="hidden xl:flex">
<Socials />
</div>
</div>
</header>
);
};
export default Header;
And the NavMobile component:
import React from "react";
//import Link
import { Link } from "react-scroll";
//import nav data
import { navData } from "../data";
//import components
import Socials from "./Socials";
const NavMobile = () => {
//destructure nav data
const { items } = navData;
return (
<nav className="w-full h-full flex flex-col justify-evenly overflow-hidden">
<ul className="flex flex-col justify-center items-center gap-y-6 py-6 mb-8">
{items.map((item, index) => {
return (
<li key={index}>
<Link
to={item.href}
spy={true}
smooth={true}
offset={-70}
duration={500}
className="text-2xl font-primary cursor-pointer uppercase"
>
{item.name}
</Link>
</li>
);
})}
</ul>
<div className="text-2xl">
<Socials />
</div>
</nav>
);
};
export default NavMobile;
The problem is that when I try to add the
onClick={() => setNavMobile(!navMobile)} to the <NavMobile /> tag it does not work to collapse the dropdown. When i add it to the surrounding div it will work everywhere EXCEPT for on the clicked links. I am using React Scroll for the links.

Answer 1

you may try passing setNavMobile funcion to NavMobile as a prop and then calling it on Link onClick