Модал Django Bootstrap выдает ошибку

Я использую скрипт jQuery, выполняемый на событии on("click"), чтобы сделать следующее:

1. ajax call to Django url / view that populates a 'modal' template.
2. modal template's HTML is then appended to an empty modal div.
3. ajax success event then does show() modal div.

Все работает успешно, например, я получаю отображение модала, с заполненным содержимым шаблона модала, но я также получаю следующую ошибку:

Uncaught TypeError: Illegal invocation selector-engine.js:22 
at Object.findOne (selector-engine.js:22)
at De._showElement (modal.js:221)
at modal.js:143
at b (index.js:242)
at backdrop.js:53
at b (index.js:242)
at v (index.js:248)
at ke._emulateAnimation (backdrop.js:125)
at ke.show (backdrop.js:52)
at De._showBackdrop (modal.js:328)

Есть идеи, что здесь происходит?

Используется Bootstrap 5, jquery-3.6

Пустой div:

<div id="modal-div"></div>

Script:

var modalDiv = $("#modal-div");
$(".open-modal").on("click", function() {
    $.ajax({
        url: $(this).attr("data-url"),
        success: function(data) {
            modalDiv.html(data);
            $("#photo-modal").modal('show');
        },
    });
});

Модальный шаблон HTML:

<div id="photo-modal" class="modal-container">

    <p>{{ photo.id }}</p>

</div>

Вернуться на верх