Issue with FullCalendar 6 eventClick popover positioning

Question

I'm currently working on implementing a FullCalendar 6 with eventClick functionality that opens a popover with additional details about the clicked event. However, I'm facing an issue with the popover positioning. I want the popover to appear next to the clicked event, but it's not working as expected.

eventClick: function(info) {
    var html = `<div class="row">
        <div class="col-sm-12">
            <span class="d-none" id="publicId"> ${info.event.publicId } </span>
        </div>
    </div>`;     
    html += `<div class="row">
        <div class="col-sm-5">Start</div>
        <div class="col-sm-7">: ${ luxon.DateTime.fromISO(info.event.start).toFormat('LLLL d, yyyy') } </div>
    </div>
    <div class="row">
       <div class="col-sm-5">Duration</div>
       <div class="col-sm-7">: ${ info.extended.duration } </div>
    </div>
    <div class="row">
       <div class="col-sm-5">End</div>
       <div class="col-sm-7">: ${ luxon.DateTime.fromISO(info.event.end).toFormat('LLLL d, yyyy') } </div>
    </div>`;
    html += `<div class="row">
        <div class="col-sm-12">
            <button id="btnEdit" class="btn btn xs btn-primary">Edit</button>
            <button id="btnDelete" class="btn btn xs btn-danger">Delete</button>
        </div>
    </div>`;
    $(".popover").remove();
    $(info.el).popover({
        html:true,
        title: event.title + '<button type="button" class="close btn-close"></button>',
        content: html,
        placement:'auto',
        container: 'body',
        sanitize: false
    }).popover('show');
}

I've noticed that the popover is not positioning correctly next to the event when clicked. How can I ensure that the popover appears next to the clicked event? Any insights or suggestions would be greatly appreciated.