How to overcome warning of "onClick" was passed to <Link> with `href` of `#` but "legacyBehavior" was set in next js?

I am working on the next project that has a lot of warnings in the browser console. I don't have any idea why this happens and how I should overcome it. There is much waring like:

"onClick" was passed to with href of /discovery/edit but "legacyBehavior" was set. The legacy behavior requires onClick be set on the child of next/link at LinkComponent (webpack-internal:///./node_modules/next/dist/client/link.js:88:23) at span at div at div at C (webpack-internal:///./node_modules/@headlessui/react/dist/internal/open-closed.js:8:255) at eval (webpack-internal:///./node_modules/@headlessui/react/dist/components/disclosure/disclosure.js:16:1808) at div at nav at div at div at div at DashboardTemplate (webpack-internal:///./common/components/templates/DashboardTemplate.js:49:26) at EditQuestions (webpack-internal:///./pages/discovery/edit/index.js:45:22) at IntercomProvider (webpack-internal:///./node_modules/react-use-intercom/dist/react-use-intercom.esm.js:228:20) at AnalyticWrapper (webpack-internal:///./contexts/AnalyticWrapper.js:33:72) at GlobalWrapper (webpack-internal:///./contexts/GlobalWrapper.js:68:62) at SessionProvider (webpack-internal:///./node_modules/next-auth/react/index.js:417:24) at App (webpack-internal:///./pages/_app.js:37:28) at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742) at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635) at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:215:26) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:402:27)

I have a sidebar file in my project that return specific one for specific user type:

const licensePro = [
{
 name: "Owner Result",
 icon: UsersIcon,
 current: false,
 href: "/dashboard/Owner Result",
 },
 {
  name: "Invite Owner",
  icon: FolderIcon,
  current: false,
  href: "#",
 },
 {
  name: "Model Owner",
  icon: CalendarIcon,
  current: false,
  href: "#",
  },
  {
   name: "Brand Ambassador",
   href: "#",
   icon: InboxIcon,
   current: false,
   },
   {
    name: "Matchmaker",
    icon: ChartBarIcon,
    current: false,
    children: [
      {
         name: "Add matchmaker",
         href: "/dashboard/matchmaker/add-matchmaker",
         current: false,
      },
      {
         name: "Matchmaker List",
         href: "/dashboard/matchmaker/matchmaker-list",
         current: false,
       },
    
     ],
   },

And where I mapped it.

{licensePro.map((item, i) => (
              <>
                <Link
                  key={i + "sec1"}
                  href={item.href}
                  className={`${
                    item.hintIndex === hintStep ? "z-[70]" : ""
                  } flex items-center px-2 py-2 text-sm font-medium leading-6 rounded-md group text-cyan-100 hover:text-white hover:bg-cyan-600`}
                  passHref
                >
                  <div
                    onClick={() => {
                      localStorage.setItem("openMenu", "off");
                    }}
                    className={`text-cyan-100 cursor-pointer hover:text-white hover:bg-cyan-600 group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500`}
                  >
                    <item.icon
                      className="w-6 h-6 mr-4 text-cyan-200"
                      aria-hidden="true"
                    />
                    {item.name}
                  </div>
                </Link>
              </>
            ))}