Svelte doesn't update calendar dynamically

Questions video intelligence (vi)
1

I’m using a svelte store, dateShifts, to calculate the events

$: events = $dateShifts.map((event) => {
    return {
      date: event.date,
      color: window.localStorage.getItem("themeColor") || "blue",
    };
  });

and I pass those events into the calendar

calendar = f7.calendar.create({
      containerEl: "#calendar",
      toolbar: false,
      value: null,
      multiple: true,
      events,
      ...

And when I update the shifts, and run calendar.update(), the calendar isnt updating, even though the dateShifts are.

onClick={() => {
              // add current shift to dateshifts
              selectedDates.map((date) => {
                console.log(date);
                dateShifts.add(date, shift);
              });
              // clear selected dates
              selectedDates = [];
              // refresh events
              console.log($dateShifts);
              renderEvents(calendar);
              //refresh calendar
              calendar.update();
            }}

And the selected dates aren’t changing.