Laravel and Tailwind Elements: Modal Illegal Invocation Error

We have a basic laravel project with tailwind css (tailwind elements), PHP8, MySQL and JQuery. During initial development we used jquery to toggle modals inside the application. However recently all the modals are stopped working during button/link clicks and is showing the error:

selector-engine.js:38 Uncaught TypeError: Illegal invocation
    at Object.findOne (selector-engine.js:38:44)
    at fs._showElement (modal.js:247:38)
    at modal.js:156:35
    at et (index.js:307:5)
    at backdrop.js:78:7
    at et (index.js:307:5)
    at tt (index.js:317:5)
    at Gi._emulateAnimation (backdrop.js:152:5)
    at Gi.show (backdrop.js:77:10)
    at fs._showBackdrop (modal.js:356:20)
findOne @ selector-engine.js:38
_showElement @ modal.js:247
(anonymous) @ modal.js:156
et @ index.js:307
(anonymous) @ backdrop.js:78
et @ index.js:307
tt @ index.js:317
_emulateAnimation @ backdrop.js:152
show @ backdrop.js:77
_showBackdrop @ modal.js:356
show @ modal.js:156
(anonymous) @ modal.js:450
each @ jquery.min.js:2
each @ jquery.min.js:2
jQueryInterface @ modal.js:439
(anonymous) @ dashboard:436
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3

And the modal toggle is as simple as the code below:

$('.invite-customer').on('click', function () {
        $('#customerInviteModal').modal('show');
});

Modal Code:

<div
        class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
        id="customerInviteModal" tabindex="-1" aria-labelledby="customerInviteModalTitle" aria-modal="true"
        role="dialog">
        <div class="modal-dialog modal-dialog-centered relative w-auto pointer-events-none">
            <div class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
                <div class="modal-header flex flex-shrink-0 p-8 border-b border-gray-200 rounded-t-md bg-yellow-700">
                    <h5 class="text-xl font-medium leading-normal w-full text-center text-white"
                        id="exampleModalScrollableLabel">
                        Invite Customer
                    </h5>
                    <button type="button"
                            class="hidden btn-close box-content w-4 h-4 p-1 text-white border-none"
                            data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body relative p-12">
                    <form action="">
                        <div class="grid gap-6">
                            <label class="block">
                                <span class="text-gray-400">Name</span>
                                <input id="customerName" type="text"
                                       class="mt-1 rounded-md border-gray-light block w-full"
                                       required
                                       placeholder="">
                                <span class="error name-error pl-5 text-center text-red-700" hidden></span>
                            </label>

                            <label class="block">
                                <span class="text-gray-400">Email</span>
                                <input id="customerEmail" type="email"
                                       class="mt-1 rounded-md border-gray-light block w-full"
                                       required
                                       placeholder="">
                                <span class="error email-error pl-5 text-center text-red-700" hidden></span>
                            </label>

                            <label class="block">
                                <span class="text-gray-400">Phone</span>
                                <input id="customerPhone" type="text"
                                       class="phone mt-1 rounded-md border-gray-light block w-full"
                                       required
                                       maxlength="20"
                                       placeholder="">
                                <span class="error phone-error pl-5 text-center text-red-700" hidden></span>
                            </label>
                        </div>
                        <div
                            class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-between mt-14">
                            <button type="button"
                                    class="inline-block px-6 py-2.5 text-yellow-700 font-medium text-xs leading-tight uppercase rounded hover:text-white border-2 border-yellow-600 hover:bg-yellow-600 focus:yellow-600 focus:outline-none focus:ring-0 active:yellow-600 transition duration-150 ease-in-out"
                                    data-bs-dismiss="modal">
                                Cancel
                            </button>
                            <button type="button" id="customerInviteBtn"
                                    class="close inline-block px-6 py-2.5 bg-yellow-700 text-white font-medium text-xs leading-tight uppercase rounded focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out ml-1">
                                Send Invite
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

However all modals are not showing.

We tried converting the modal to use tailwind element modal functions based on the documentation .

However we need to close the modal using jquery as we have to send an ajax request during a click of a button inside the modal, is this possible? or do we have to use pure javascript like the one here ?