Ability to pass more data to the "renderDay" method or how to add tooltips?

[ifier]

Is your feature request related to a problem? Please describe.
Hi. Great library, love it.
What I want to implement - tooltips over holidays or vacations.

I've made full year calendar and I want mark all holidays on it. I can make it with modifiers - that's great. Then I need, somehow, to add tooltips to holidays/vacations - when hovering a day, there would be small tooltip with name of this holiday.
For example:
1 Jan | New Year's Day - when someone hovering this day, I need to show small tooltip with text "New Year's Day". I didn't found any solutions that can be implemented with modifiers :(
12.10.2019-12.20.2019 - the same for vacations. I need to show tooltip with text - "Mark's vacation".

For tooltips (and others) I'm using Material UI framework.

Describe the solution you'd like
Ability to set/get more data in the renderDay method or small instructions how to implement it without adding new features. But I think Tooltips over dates will be helpful and it would be great to see them in the examples/docs.

Additional context
http://react-day-picker.js.org/examples/elements-cell
I've seen this example, but it is not covering vacations, I guess, with date ranges.
Here my code example:

import React from "react";
import DayPicker, { DateUtils } from "react-day-picker";
import "react-day-picker/lib/style.css";

import "./calendar-year.scss";
import { Tooltip } from "@material-ui/core";

const modifiers = {
  holidays: {
    [new Date(2020, 0, 1, 12)]: "New Year's Day",
    [new Date(2020, 0, 7, 12)]: "Orthodox Christmas Day",
    [new Date(2020, 2, 8, 12)]: "Women's Day"
  },
vacations: [
    {
      from: new Date(2020, 0, 6, 12),
      to: new Date(2020, 0, 10, 12),
      name: "Mark"
    },
    {
      from: new Date(2020, 0, 8, 12),
      to: new Date(2020, 0, 10, 12),
      name: "Mark"
    }
  ]
};

const modifiersStyles = {
  holidays: {
    background: "rgba(255, 122, 122, 0.4)"
  },
  vacations: {
    background: "rgba(255, 122, 255, 0.4)"
  }
};

function renderDay(day, mod) {
  const date = day.getDate();
  const classNames = `${modifiers.holidays[day] ? "holiday" : ""}`;
  const title = modifiers.holidays[day] || "";

  return (
    <Tooltip title={title} className={classNames}>
      <div>{date}</div>
    </Tooltip>
  );
}

class CalendarYear extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      from: null,
      to: null
    };
  }

  handleDayClick = day => {
    const range = DateUtils.addDayToRange(day, this.state);

    this.setState(range);
  };

  render() {
    const { from, to } = this.state;

    return (
      <DayPicker
        className="Range"
        numberOfMonths={12}
        selectedDays={[{ from, to }]}
        modifiers={modifiers}
        modifiersStyles={modifiersStyles}
        onDayClick={this.handleDayClick}
        renderDay={renderDay}
        canChangeMonth={false}
      />
    );
  }
}

export default CalendarYear;

[KyorCode]

You could use the isDayInRange on the DateUtils (http://react-day-picker.js.org/api/DateUtils) to check if the current day is within range of the current modifier.

[jhoanborges]

You could use the isDayInRange on the DateUtils (http://react-day-picker.js.org/api/DateUtils) to check if the current day is within range of the current modifier.

This is the right link https://daypicker.dev/api/functions/isDateRange