<a> cannot appear as a descendant of <a>. Nextjs - reactjs

Question

I kept getting this error: Error: Hydration failed because the initial UI does not match what was rendered on the server.
Here is my code:
import { Fragment } from "react";
import { Menu, Transition } from "#headlessui/react";
import { ChevronDownIcon } from "#heroicons/react/20/solid";
import React from "react";
import { BsFillRecordCircleFill, BsFunnel } from "react-icons/bs";
import { FiCircle } from "react-icons/fi";
import Link from "next/link";
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
const Filter = () => {
return (
<div className="">
{/* Menu */}
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-[#1F3C71] text-white px-4 py-3 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100 gap-1 items-center">
<BsFunnel />
Filter
<p className="bg-white text-[#1F3C71] rounded-full w-5 h-5">2</p>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
<div className="flex items-center justify-between py-2 px-5">
<p className="font-bold">Filters</p>
<p className="font-semibold text-[#1F3C71]">Apply</p>
</div>
<hr />
<Menu.Item>
{({ active }) => (
<main className="flex items-center">
<BsFillRecordCircleFill className="ml-6 text-[#1F3C71]" />
<Link
href="#"
className={classNames(
active ? "bg-white text-gray-900" : "text-gray-700",
"block px-4 py-2 text-sm"
)}
>
Status
</Link>
</main>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<main className="flex items-center">
<FiCircle className="ml-6" />
<Link
href="#"
className={classNames(
active ? "bg-white text-gray-900" : "text-gray-700",
"block px-4 py-2 text-sm"
)}
>
Email
</Link>
</main>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<main className="flex items-center">
<BsFillRecordCircleFill className="ml-6 text-[#1F3C71]" />
<Link
href="#"
className={classNames(
active ? "bg-white text-gray-900" : "text-gray-700",
"block px-4 py-2 text-sm"
)}
>
Data Range
</Link>
</main>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</div>
);
};
export default Filter;
I try to change the Link tag but still having the issue.
I also got this error as well: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.