Bootstrap modal always execute after Datatables's page change event

Question

I'm trying to create a custom modal with bootstrap and It's purpose is to warn user If there are unsaved works before changing page. But for some reason, The modal is always appear after the DataTables change the page.

Here is my code:

let pageLength = 10

let myTable = $("#myTable").DataTable(
{
    pageLength: pageLength,
    order: [0, "desc"],
    preDrawCallback: function (settings) {
        // ignore first draw
        if (myTable) { 
            // check if there are any unsaved changes
            if (isEditing()) {
                // show the modal
                $('#alert-modal').modal({ backdrop: 'static' })
                
                // other stuffs ...
            }
        }
    },
});

I have referenced some other posts, tested It with browser's default dialog and It worked fine, but I'm not sure what is the reason for this behavior with bootstrap.

Please help