cannot appear as a descendant of . Nextjs

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.