When creating two instances of <Calendar /> the first calendar mirrors the second one

[LukGer]

When adding two calendars to a page with seperate key props and seperate states, the first calendars "date display" is overwritten by the second calendars one.

I think this is due to the onSetActiveDateRanges event emitter

activeDateRangesEmitter.emit(
    "onSetActiveDateRanges",
    calendarActiveDateRanges ?? []
);

which does not differentiate between the two calendars.

Sorry I'm fairly new to github and forks but I added this to Calendars.stories.tsx for a reproduction

export const WithDuplicateCalendars = (args: typeof KichenSink.args) => {
  const [firstDate, setFirstDate] = useState<string>("2024-08-01");
  const [secondDate, setSecondDate] = useState<string>("2024-08-01");

  return (
    <>
      <Calendar
        {...args}
        calendarActiveDateRanges={[
          {
            startId: firstDate,
            endId: firstDate,
          },
        ]}
        calendarMonthId={firstDate}
        getCalendarDayFormat={format("dd")}
        getCalendarMonthFormat={format("MMMM yyyy (LL/yyyy)")}
        getCalendarWeekDayFormat={format("E")}
        key="1"
        onCalendarDayPress={(dateId) => setFirstDate(dateId)}
      />
      <Text>Actual date: {firstDate}</Text>
      <Calendar
        {...args}
        calendarActiveDateRanges={[
          {
            startId: secondDate,
            endId: secondDate,
          },
        ]}
        calendarMonthId={secondDate}
        getCalendarDayFormat={format("dd")}
        getCalendarMonthFormat={format("MMMM yyyy (LL/yyyy)")}
        getCalendarWeekDayFormat={format("E")}
        key="2"
        onCalendarDayPress={(dateId) => setSecondDate(dateId)}
      />
      <Text>Actual date: {secondDate}</Text>
    </>
  );
};

Thanks a lot in advance

[MarceloPrado]

Oh, thanks for the reproduction! I can take a stab in the next couple of days

[MarceloPrado]

Done!

[LukGer]

Thanks a lot