FullCalendar v5 - Best way to update full list of events in React?

Question

Let's consider the following scenario -

• we have a dropdown/select component (outside of FullCalendar) for a list of departments - Department 1, Department 2 etc.
• Each department has its own list of events (department1Events from below for example), which we'll need to render in the calendar.
• each time a user selects a new department, we'll need to fetch the corresponding list of events. This fetching of events doesn't need to use FullCalendar's function-based approach for events where we make use of successCallback etc. Let's say we're trying to avoid using the function based approach and instead just want to use the JSON-based one. We'll fetch this list of events by ourselves, outside of FullCalendar.

So mainly, I need to update the list of events that the calendar is rendering every time the user selects a department, or switches between them. Given that, is removing all events and then adding to the event source (as shown below) a good approach?

            //events list
            const department1Events = [
               {
                 id:1,
                 title: 'dept 1 event 1',
                 color: 'red'
               },
               {
                 id:2,
                 title: 'dept 1 event 2',
                 color: 'green'
               }
            ];
            
            const department2Events = [
               {
                 id:111,
                 title: 'dept 2 event 1',
                 color: 'yellow'
               },
               {
                 id:2222,
                 title: 'dept 2 event 2',
                 color: 'orange'
               }
            ]
            
            //maintaining the events list on the component state
            const [eventsList, setEventsList] = useState(department1Events);

            //component to switch between departments
            <SelectComponent
              label="Department"
              options={[
                  {id:'department 1', value:'department1'},
                  {id:'department 2', value:'department2'}
              ]}
              onChange={(value) => handleDepartmentChange(value)}
            />

            //handler for department change
            const handleDepartmentChange = (department) => {
              const myCalendar = calendarRef?.current?.getApi();
              myCalendar?.removeAllEvents();
              myCalendar?.addEventSource(department);
              setEventsList(value);
            };
            
            //calendar component
            <FullCalendar
               ref={calendarRef}
               headerToolbar={false}
               plugins={[dayGridPlugin, timeGridPlugin]}
               initialView="timeGridDay"
               initialEvents={eventsList}
             />;

I believe the removal is necessary with this approach because otherwise it appends the second list of events to the first one, resulting in department one showing both the departments' events, which is not correct. The way I'm having to remove the events and then add to a source seems a bit iffy. Is there a cleaner way (perhaps a set of methods that I'm missing?) to address this inside the handleDepartmentChange method using the API?