FullCalendar 5 - eventDrop fails to edit event prop the first time?

i have a popover that shows when hovering over an event on my calendar, i was trying to make it so it shows "Unsaved Changes" on it whenever i moved the event to another date, in order to do that i added an extra prop to my events called unsavedChanges and defaulted it to false, and whenever o drag and dropped an event anywhere it would be set to true, like this

eventDrop: function (info) {
                info.event.setExtendedProp('unsavedChanges', true);
            }

if the unsavedChanges was true, the popover would have an extra string on the tittle like i wanted.

This is kinda working, the first time i drag and drop an event nothing changes, but when i do it again it works, and i have no idea why, it seems when eventDrop sets unsavedChanges to true the first time it gets reverted for some reason, but the second time it works, what am i doing wrong?

Here's my entire script

 <script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        editable: true,
        eventClick: function (info) {
            var endDate = new Date();
            endDate.setDate(info.event.end.getDate() - 1);
            alert('Doodle Id: ' + info.event.id);
            alert('Event: ' + info.event.start.toLocaleDateString("en-GB") + ' - ' + endDate.toLocaleDateString("en-GB"));
        },
        eventMouseEnter: function (info) {
            info.el.style.borderColor = 'black';
        },
        eventMouseLeave: function (info) {
            info.el.style.borderColor = null;
        },
        eventDidMount: function (info) {
            info.el.style.borderWidth = '2px';
            $(info.el).popover({
                title: function () {
                    if (info.event.extendedProps.unsavedChanges == true) return (info.event.title + ' *Unsaved Changes*');
                    return info.event.title;
                },
                placement: 'top',
                trigger: 'hover',
                html:true,
                content: function () {
                    var endDate = new Date();
                    endDate.setDate(info.event.end.getDate() - 1);
                    var imageHtml = '<div class="img-thumbnail"> <img src="data:image/png;base64,' + info.event.extendedProps.imageB64 + '" class="img-thumbnail"/></div>';
                    var dateHtml = '<div> Data:' + info.event.start.toLocaleDateString("en-GB") + ' - ' + endDate.toLocaleDateString("en-GB") + '</div>';
                    var infoHtml = '<div> Publico: ' + info.event.extendedProps.target +'</div>';
                    popoverHtml = dateHtml+infoHtml+ imageHtml;
                    return popoverHtml; 
                },
                container: 'body'
            });
        },
        eventDrop: function (info) {
            info.event.setExtendedProp('unsavedChanges', true);
        }
      });

      @foreach (var doodle in Model.List)
      {
   <text>
      calendar.addEvent({
          id:'@doodle.BannerId',
          title: '@doodle.Name',
          imageB64: '@doodle.Base64File',
          target: '@doodle.TbTargets.First().Name',
          start: '@doodle.DateStart.ToString("yyyy-MM-dd")',
          end: '@doodle.DateEnd.AddDays(1).ToString("yyyy-MM-dd")',
          unsavedChanges:false,
          allDay:true
      });
   </text>
      }
      calendar.render();

    });



</script>