DaisyUI modal does not exist on type Window of type globalThis

I'm trying to import a dialog component from daisy ui but I'm getting the following error message:

Unsafe member access .showModal on an `any` value.eslint@typescript-eslint/no-unsafe-member-access
Unsafe call of an `any` typed value.eslint@typescript-eslint/no-unsafe-call
Unsafe return of an `any` typed value.eslint@typescript-eslint/no-unsafe-return
Property 'my_modal_2' does not exist on type 'Window & typeof globalThis'.ts(2339)

I didn't tamper with the default code:

<button
              className="btn"
              onClick={() => window.my_modal_2.showModal()}
            >
              open modal
            </button>
            <dialog id="my_modal_2" className="modal">
              <form method="dialog" className="modal-box">
                <h3 className="text-lg font-bold">Hello!</h3>
                <p className="py-4">Press ESC key or click outside to close</p>
              </form>
              <form method="dialog" className="modal-backdrop">
                <button>close</button>
              </form>
            </dialog>

Anyone know what's going on?

The example code is in javascript and consequently not type-safe in typescript which you use.

Try the following, which is a bit more verbose but should remove all ts errors:

<button
  className="btn"
  onClick={() => {
    if (document) {
      (document.getElementById('my_modal_2') as HTMLFormElement).showModal();
    }
  }}
>