nextjs: Multiple children were passed to <Link> with `href` of 'x' but only one child is supported - next.js

Question

I'm not passing multiple children to the Link, why am I getting this error? The error is:
"Multiple children were passed to with href of /post/61703ea640ff7eef1e1e7e75 but only one child is supported"
return (
<>
{head()}
<div className="container-fluid"
style={{
backgroundImage: "url( "+ "/images/default.jpg"+ ")",
backgroundAttachment: "fixed",
padding: "100px 0px 75px 0px",
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center center',
display: 'block'
}}>
<h1 className="display-1 font-weight-bold text-center py-5">MERNCAMP</h1>
</div>
<div className="container">
<div className="row pt-5">
{posts.map((post) => (
<div key={post._id} className="col-md-4">
<Link href={`/post/view/${post._id}`}>
<a>
<PostPublic key={post._id} post={post} />
</a>
</Link>
</div>
))}
</div>
</div>
</>
)

Answer 1

Wrap the entire link with one div
<Link key={post._id} href={`/post/${post.slug.current}`}>
<div>
<div>
<img src={urlFor(post.mainImage).url()} alt=''></img>
</div>
<div>
<p>{post.title}</p>
<p>
{post.description} by {post.author.n`enter code here`ame}
</p>
</div>
<img src={urlFor(post.author.image).url()!} alt=''></img>
</div>
</Link>

Answer 2

I don't see anything wrong with your code.
Are you sure that's how it's written in your source file? This error usually happens if you have a space in between the <Link> and the <a> tags.
Example:
...
{posts.map((post) => (
<div key={post._id} className="col-md-4">
<Link href={`/post/view/${post._id}`}> <a>
<PostPublic key={post._id} post={post} />
</a></Link>
</div>
))}
You see the space in between the tags in <Link href={`/post/view/${post._id}`}> <a>

Answer 3

If it helps any one i was getting same error in following e.g code
<ul>
<li>
<Link href="/something">Link to some page</Link>
</li>
</ul>
I fixed it by enclosing the text inside a p tag, seems like every block of text/word is considered as new unique "children"
<ul>
<li>
<Link href="/something">
<p>Link to some page</p>
</Link>
</li>
</ul>

Answer 4

I know that is too late but just in case...
I got the same error and I solved by just restarting the development server, I know that is so silly but worked for me.
Also, be sure that your component <PostPublic /> doesn't have Link inside, my theory is probably is nesting links to your main Link child that is been mapped. Hope can help that to anyone.