Warning: React has detected a change in the order of Hooks called by NavButton. This will lead to bugs and errors if not fixed

I have following component in next js:

const NavButton = ({icon, 'icon-active': iconActive, title, link, badge, refreshable = false}) => {
    const {pathname, reload} = useRouter();
    const isActive = link === pathname;
    const Icon = isActive ? iconActive : icon;
    const handleRefreshIfRequired = e => {
        if (!refreshable) return;
        if (isActive) {
            e.preventDefault();
            reload();
        }
    };
    return <Link href={link}
                 onClick={handleRefreshIfRequired}
                 className={clsx('home-page-button', {'home-page-button-active': isActive})}>
        <div className="button-icon">
            <Icon/>
        </div>
        <div className="button-title">
            {title}
            {badge && <strong
                className={'bg-danger card text-white px-1 border-none ms-1 font-bold animate-fade inline-block'}>{abbrNumber({number: badge})}</strong>}
        </div>
    </Link>;
};

Now when I use the component, it says:

Warning: React has detected a change in the order of Hooks called by NavButton. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. undefined                  useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^