Как правильно инициировать всплывающее окно Bootstrap 5 на кнопке, расположенной в нижнем колонтитуле модального окна

    var locateScreen = new bootstrap.Modal(document.getElementById('TestModalFooterPopover'))


        //Popover
        var exampleEl = document.getElementById('TestPopover-btn')
        var popover = new bootstrap.Popover(exampleEl, {
            html: true,
            sanitize: false,
            container: exampleEl,
            //container: '.modal-footer',
            //container: 'body',
            title: "Confirm user action?",
            content: $('[data-name = "popover-test-content"]')
        });


locateScreen.show()

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" ></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class = "modal fade" id = "TestModalFooterPopover" tabindex = "-1" aria-hidden = "true" data-bs-theme = "dark" data-bs-backdrop = "static" data-bs-keyboard = "false">
  <div class = "modal-dialog modal-fullscreen modal-dialog-centered">
    <div class = "modal-content">
        <div class = "modal-header">
            <h1 class = "modal-title fs-5" id = "locateScreenLabel">Test Footer Popovers</h1>
        </div>
        <div class = "modal-body">
             <div class = "container-fluid h-100">Hello,world.</div>
      </div>
        <div class = "modal-footer">

            <button type = "button" class = "btn btn-sm btn-warning" id = "TestPopover-btn">Test Popover</button>

            <div id = "popover-test-holder" class = "d-none">
                <div data-name = "popover-test-content">
                    <div class = "col-sm-12 input-group-sm">
                        <p>Here is a popover with some confirm buttons, where is the bottom of the popover?</p>
                    </div>
                    <div class = "text-center">
                        <button href = "#" class = "btn btn-sm btn-outline-danger me-2">No</button>
                        <button href = "#" class = "btn btn-sm btn-outline-success">Yes</button>
                    </div>
                </div>
            </div>

            <button type = "button" class = "btn btn-sm btn-danger"  id = "locate-btns-close">Close Session</button>
        </div>
      </div>
    </div>
</div>