Style change everytime fullcalendar rerender

Question

Firstly I'm using fullcalendar v5.

What I have achieve so far

The flag is to indicate start and finish event. The second and third event is the repetition of the first event. What I want to achieve is when I select a date on the first event it will change the background color to white and second and third event will follow the first event automatically.

This is my code:

     dateClick: function (info) {
        var events = calendars[1].getEvents();
        var startEvent = null;
        var endEvent = null;
        var duration = 0;

        if (events != null) {
          startEvent = events[0].start;
          endEvent = events[0].end;

          if (moment(info.date).isBetween(moment(startEvent), moment(endEvent).subtract(1, 'days'))) {
            duration = moment.duration(moment(info.date).diff(moment(startEvent))).asDays();

            console.log(info);

            Swal.fire({
              title: 'Rmove only this day',
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
              if (result.isConfirmed) {
                events.forEach(event => {
                  console.log(event)
                  $('.fc-daygrid-day[data-date="' + moment(event.start).add(duration, 'days').format('YYYY-MM-DD') + '"] ').css('background-color', '#fff');
                });
              }
            })
          }
        }
      }

The problem is when I change to other month, the date's background-color that already change to white will change back to blue as the fullcalendar rerender.

It turn into this when i change to other month and return back