Custom turbo_confirm method as modal

Question

Hello there I've been trying to make custom turbo_confirm modal and i noticed a problem, the modal pops up for a second and thing gets deleted I don't even have time to confirm it or cancel.

Here's my code:

There's my view with tailwind styling

//confirm_modal.html.erb

<div class="relative z-20 hidden" id="modal" data-controller="modal" data-action="keydown@window->modal#closeOnEsc" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75"></div>
  <div class="fixed z-10 inset-0 overflow-y-hidden">
    <div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
      <div class="relative bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full sm:p-6">
        <div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
          <button type="button" class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500" data-action="modal#close">
            <span class="sr-only">Close</span>
            <%= icon "outline/x" %>
          </button>
          <button id="open-modal" class="sr-only" data-action="modal#open">Open</button>
        </div>
          <dialog id="turbo-confirm">
            <form method="dialog" class="justify-between py-4 px-4">
              <p class="flex">Are you sure?</p>
              <div class="flex gap-2 justify-end">
                <button class="button-secondary" value="cancel">Cancel</button>
                <button class="button-danger" value="confirm">Confirm</button>
              </div>
            </form>
          </dialog>
      </div>
    </div>
  </div>
</div>


//modal_controller.js

import { Controller } from "@hotwired/stimulus";
// replaces basic confirm method with modal
Turbo.setConfirmMethod((message, element) => {
  console.log(message, element)
  let dialog = document.getElementById("turbo-confirm")
  dialog.showModal()

  return new Promise((resolve, reject) => {
    dialog.addEventListener("close", () => {
      resolve(dialog.returnValue == "confirm")
    }, { once: true })
  })
})

// Connects to data-controller="modal"
export default class extends Controller {
  close() {
    document.getElementById("modal").classList.add("hidden");
  }

  closeOnEsc(e) {
    if (e.key === "Escape") this.close();
  }

  open() {
    document.getElementById("modal").classList.remove("hidden");
  }
}

And that's how I'm trying to use it:

<%= link_to "Delete", item_path(item), data: { action: "click->modal#open","turbo-method": :delete, turbo_confirm: "Are you sure?"}, class: "dropdown-item", role: "menuitem", tabindex: "-1" %>

Any ideas what's the problem?