Невозможно использовать Gatsby Link с justify-content

Question

У меня есть компонент навигации, использующий Gatsby Link вместе со стилизованными компонентами

Оригинальный компонент навигации

import React from "react"
import styled from "styled-components"
import { Link } from "gatsby"

const NavWrapper = styled.nav`
  display: flex;
  justify-content: flex-end;
  @media screen and (max-width: 769px) {
    display: none;
  }
`

const NavItem = styled(props => <Link {...props} />)`
  font-size: 1.4rem;
  color: #eeeeee;
  margin: 20px 15px 0 0;
  padding-right: 15px;
  text-decoration: none;
  border-right: 1px solid #eeeeee;
  line-height: 80%;
  &:nth-child(4) {
    border-right: none;
  }
`

const DesktopNav = () => (
  <NavWrapper>
    <NavItem to="/" activeClassName="active">
      home
    </NavItem>
    <NavItem to="/portfolio" activeClassName="active">
      portfolio
    </NavItem>
    <NavItem to="/about" activeClassName="active">
      about
    </NavItem>
    <NavItem to="/contact" activeClassName="active">
      contact
    </NavItem>
  </NavWrapper>
)

export default DesktopNav

, но когда я использую justify-content для выравнивания навигации ни одна из ссылок не кликабельна. Я попытался восстановить навигацию без использования Gatsby Link, например:

Перестроить компонент навигации

const DesktopNav = () => (
    <nav>
        <ul>
            <li><a href="/">home</a></li>
            <li><a href="/portfolio">portfolio</a></li>
            <li><a href="/about">about</a></li>
            <li><a href="/contact">contact</a></li>
        </ul>
    </nav>
)

export default DesktopNav

, но все равно в любое время я использую justify-content для выровняйте навигацию, ни одна из ссылок не активируется, несмотря на то, что в консоли браузера я вижу набор href для каждого элемента.

I также обнаружил, что если я удаляю justify-content, но сохраняю display: flex;, то некоторые из навигационных ссылок кликабельны, а другие нет. Я не уверен, что это как-то связано с display: flex; установкой контейнера как элемента блока или это какая-то ошибка? Я пробовал это как в Firefox, так и в Chrome, используя последнюю версию Gatsby, но не повезло. Любая помощь будет принята с благодарностью!