Adding dates to modifiers of react-day-picker to show holidays

[dtg-coder]

Using react-day-picker I need to add dates to the modifiers property. I have the dates (holiday name, holiday date) that I can pass to a function that can use it. I currently have the dates getting to the function but I cannot get them formated correctly for the react-day-picker component to show them properly. I only get 1 date to show up and the rest dont show.

I am passing an object made up of dates (holiday_date, holiday_name) and I am only getting the first holiday to show. What am I doing wrong?

const modifiersHoliday = (holidays) => {
  const types = {};

  holidays.forEach((holi) => {
    const from = dayjs(holi.holiday_date).toDate();
    const to = dayjs(holi.holiday_date).toDate();
    const allDaysInTimeOff = getDatesBetweenRange(from, to);

    types["holiday"] = allDaysInTimeOff;
  });

  return types;
};

[gpbl]

@dtg-coder from your code it looks like you are overriding the holiday modifiers with the last allDaysInTimeOff. Your types["holiday"] should be initialized as an empty array, so than you can write:

- types["holiday"] = allDaysInTimeOff;
+ types["holiday"].push(allDaysInTimeOff);

please provide a more complete example in a code sandbox if you need more help:

https://codesandbox.io/p/sandbox/react-day-picker-wfy7mq