why i am getting this error on using Link tag from next/link? Error: React.Children.only expected to receive a single React element child - css

Question

hey guys, I know this question is already been asked but I did not get an appropriate answer. I got this error on using next/link . whenever I replace the anchor tag with the "Link" tag I got this error.I will be very thankful if somebody can help
code
import {APP_NAME} from '../config';
import Link from 'next/link';
const Navbar=()=>{
return(
<>
<nav className='navbar bg-success'>
<h1>
<Link href="/dashboard" ><i className="fas fa-code"></i><a>{App_name}</a></Link>
</h1>
<ul>
<li><Link href="#"><a>Jobseeker</a></Link>
</li>
<li>Community</li>
<li>Employer</li>
</ul>
<h3><i className =""></i>Account
</h3>
</nav>
<div className="bottom-nav ">
<div className="bottom-item">
<i className="fas fa-columns text-primary "></i>
<p className=" text-primary">Dashboard</p>
</div>
<div className="bottom-item">
<i className="fas fa-user text-primary "></i>
<p className=" text-primary">jobseeker</p>
</div>
<div className="bottom-item">
<i className="fas fa-users text-primary "></i>
<p className=" text-primary">community</p>
</div>
<div className="bottom-item">
<i className="fas fa-user text-primary "></i>
<p className=" text-primary">Profile</p>
</div>
</div>
</>
)
}
export default Navbar;

Answer 1

Try that:
<Link href="/dashboard" ><a><i className="fas fa-code"/><span>{App_name}</span></a></Link>

Answer 2

It's like the error stated, <Link> was only expecting a single chid, while you have <li> and <a>. Wrap the <a> under <li>, you should be able to fix the problem.