DropdownMenu inside next/link

[AdisonCavani]

• Option 1 - the DropdownMenu doesn't close
• Option 2 - the DropdownMenu closes, but it navigates to /item/1

I don't want to navigate to /item/1, but close the DropdownMenu when I click the DropDownMenuItem.
How can I achieve it?

function ExampleComponent() {
  return (
    <Link
      href="/item/1"
      className="flex justify-between rounded border px-2 py-1"
    >
      <p>Example</p>

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button>***</button>
        </DropdownMenuTrigger>

        <DropdownMenuContent>
          <DropdownMenuItem onClick={(event) => event.preventDefault()}>
            Option 1
          </DropdownMenuItem>
          <DropdownMenuItem>Option 2</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </Link>
  );
}

export default ExampleComponent;