React перерисовывает все элементы в списке, которые используют useRouter из NextJS

В моем новом приложении я использую React и NextJS. В приложении имеется список, который содержит элементы, которые выделяются, когда страница активна. Когда вы нажимаете на элемент в этом списке, вы попадаете на другую страницу. Посмотрев в профилировщик, я заметил, что все элементы списка перерисованы, хотя должны были перерисоваться только 2.

Перерисовка начинается в этом компоненте:

export const SidebarOrganizationsListItemLink: React.FC<SidebarOrganizationsListItemLinkProps> = (props) => {
  const { className: classNameProp, data: { organization }, ...restProps } = props;
  const classes = useStyles()
  const router = useRouter()

  const active = React.useMemo(() => {
    const { organizationId } = router.query

    return organizationId === organization.id
  }, [router, organization.id])
  const className: string = React.useMemo(() => {
    return clsx(classes.root, { [classes.active]: active }, classNameProp)
  }, [classes, classNameProp, active])

  return (
    <ButtonLink {...restProps} className={className}>
      <Badge color="secondary" overlap="circle" badgeContent={organization.badgeContent}>
        <Avatar className={classes.avatar}>{organization.alt}</Avatar>
      </Badge>
    </ButtonLink>
  )
}

Полный код здесь

Почему это происходит и как этого избежать?