<a> cannot appear as a descendant of <a>

[joshball]

Checking out a new hacker starter, and rendering the index page (https://github.com/Chronoblog/gatsby-theme-chronoblog/blob/master/starters/hacker/src/pages/index.mdx) you will receive an error in the console of chrome:

index.js:2177 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
    in a (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (at root.js:39)

It appears that the code in root.js

const Link = ({ to, children, ...props }) => (
  <LinkGatsby to={to} {...props}>
    <LinkThemeUi>{children}</LinkThemeUi>
  </LinkGatsby>
);

Is creating two anchors when using Link in the MDX. For instance, in index.mdx:

<h3>
  Posts and Articles / <Link to='posts-and-articles'>All of Them</Link>
</h3>

Not exactly sure how to combine GatsbyLinks with the LinkThemeUI, or I would create a PR.
Maybe something like using <LinkThemeUI as={LinkGatsby} or LinkGatsby as={LinkThemeUI}

Thoughts?