title: Error: Multiple children were passed to <Link> with `href` of `/posts` but only one child is supported
body: <p>I'm getting this error and am having issues identifying the source. <a href="https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag" rel="nofollow noreferrer">Next.js</a> reference says I can force pass the link to <code>&lt;a&gt;</code> tags, if the child is a custom component.</p>
  <p>Here's the code:</p>
  <pre><code>import Link from 'next/link'
  
  function PostList({ posts }) {
    return (
      &lt;&gt;
        &lt;h1&gt;List of Posts&lt;/h1&gt;
        {posts.map((post) =&gt; {
          return (
            &lt;div key={post.id}&gt;
              &lt;Link href={`posts/${post.id}`} passHref&gt;
                &lt;h2&gt;
                  {post.id} {post.title}
                &lt;/h2&gt;
              &lt;/Link&gt;
              &lt;hr /&gt;
            &lt;/div&gt;
          )
        })}
      &lt;/&gt;
    )
  }
  
  export default PostList
  
  export async function getStaticProps() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
    const data = await response.json()
  
    return {
      props: {
        posts: data.slice(0, 3),
      },
    }
  }
  
  </code></pre>
  <p>I'm passing <code>passHref</code> into the <code>Link</code>. What might be causing this error?</p>