Menu items not highlighting when using useNavigate

Hi all,

We have a banner in our app with a button that takes users to the Settings page. This banner is on a separate page. When the user clicks the button, the user is taken the the correct url, but the menu item stays highlighted on the previous page the user was on. It doesn’t change to highlight the Settings menu item.

We are using useNavigate from react-router-dom

Is there a better way of doing this? This is our banner component:

<Banner
  title="Visit Settings"
  action={{content: 'Visit Settings', onAction: () => navigate("/settings")}}
  tone="warning"
>
  <p>Visit Settings</p>
</Banner>

Thank you very much,
Adam