Необходимая версия next / router не работает с Semantic-UI-React?

Question

В соответствии с Next.js документами

Вы также можете осуществлять переходы страниц на стороне клиента, используя next / router:

import Router from 'next/router'

function ReadMore() {
  return (
    <div>
      Click <span onClick={() => Router.push('/about')}>here</span> to read more
    </div>
  )
}

export default ReadMore

Я, по сути, экстраполирую это на мой собственный пример с Sematic-UI-React:

Это мое текущее поведение, которое явно нежелательно.

В какой-то момент вы можете увидеть компонент <Link/> или, возможно, его <Menu.Item/> не синхронизирован.

Так работает <Menu.Item/> в соответствии с их документами.

Вы можете видеть, как быстро он ведет себя, но это с закомментированным тегом <Link/> ...

Это больше HOC.

   var comparator;
const GenericIsUserLoggedInLink = React.memo(({ isHomeButton, isLoggedIn, logOutUser, route, anchorText, mobile, name, active, handleItemClick }) => {

 comparator = (prevProps, nextProps) => {

  if (prevProps.isHomeButton !== nextProps.setProps.isHomeButton) {
   return true;
  }
  if (prevProps.isLoggedIn !== nextProps.setProps.isLoggedIn) {
   return true;
  }
  if (prevProps.mobile !== nextProps.setProps.mobile) {
   return true;
  }
  if (prevProps.name !== nextProps.setProps.name) {
   return true;
  }
  if (prevProps.active !== nextProps.setProps.active) {
   return true;
  }
  return false;
 }

 function currentNav(route, name, active, handleItemClick) {

  // console.log("handleItemClick ", handleItemClick);
  // console.log("active ", active);
  // console.log("name ", name);

/* This is where I extrapolated their imperative version */

function MyLink({children, route}) {
  console.log(`route ${route}`)
  return (
    <>
      <span onClick={() => Router.push(route)}>{children}</span>
    </>
  )
}

  return (
    <MyLink route={route}>
    <Menu.Item
     to={route}
     key={name}
     name={name}
     active={active == name}
     onClick={(e) => {
       handleItemClick(e, { name });
     }
    }
    >
    </Menu.Item>
    </MyLink>
  );

 }

 if (isHomeButton) {
  return currentNav(route, name, active, handleItemClick)
 }
 if (isLoggedIn) {
  if (anchorText === undefined) {
   return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
  }
  else if (mobile) {
   return currentNav(route, name, active, handleItemClick)
  }
  else if (!(mobile)) {
   return currentNav(route, name, active, handleItemClick)
  }

  else if (anchorText) {
   return <Link href={route}><a>{anchorText}</a></Link>
  }
 } else {
  if (route === "/login") {
   return <Link href="/login"><a>Log in!</a></Link>
  }
  return null
 }
}, comparator);

Любая помощь будет оценена!