I have a website with two pages. When clicking on the nav link, I need the page and the nav link name to change. I tried this:

const [isClicked, setIsClicked] = useState(false);

const ClickHandler = () => {
    setIsClicked(!isClicked);
}

<NavLink to={isClicked ? '/' : '/profile'} onClick={ClickHandler}><NavPage>{isClicked ? 'Home': 'Profile'}</NavPage></NavLink>

but this showed me an error where when going to profile page. The link name and the actual link do not change, only the page changes, it has to be clicked again for everything to be ok.

Another problem when refreshing in the profile page the link name becomes profile again, I want it to be home.