React Router v6 - re-rerenders

I am trying to use react router v6 for my application. Whenever I try to navigate from a component programmatically using useNavigate() hook, the entire component gets re-rendered when I navigate. I am trying to build a header which navigates between different pages.

I want to avoid unwanted re-renders of the header component as the routing is taking place only on the children. However if I move the Button component to a separate component and use the useNavigate hook within that child component, the header component is restricted from re-renders. How ever the button component gets re-rendered. I would like to understand how this useNavigate() hook is designed and how should we properly use it to avoid these situations.

Thanks in advance!

export default function Header() {
    console.log("header rendering...")
    const navigate = useNavigate()
    return (
        <>
            {
MENUS.map((menu, index) => {
                    return <Button 
                              key={index} 
                              onClick={() => navigate(menu.route)}
                            >
                            {menu.name}
                            </Button>
              })
            }
        </>
    );
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/JTFRdio