<div>
   <div onClick={()={closeMenu()}}>
       <Dashboard />
   </div>
       <Navbar />
</div>

I have an app where on the navbar I have a clickable button than when clicked displays a menu. I had to also make it so when I click any part of the page, the menu hides so I used states at the top of the tree. Problem is that any time I open or close the menu, it forces a re render (I think?) since the state is at the top. How can I approach this to avoid re renders? Usememo in this case wouldn't work since the boolean/state will always change and will trigger a re render unless I'm missing something?