How do I style clicked date in react-calendar?

Question

I'm using react-calendar and I'm trying to style a specific date once it's clicked, but I have only managed to find out how to style a whole month. I tried researching if I could wrap a date that was clicked on in a div and assign that div to a class, but I couldn't find a way to do that. Any other ideas?

export const CalendarPage = () =>  {
  const datesToAddClassTo = ["Thu May 06 2021 00:00:00 GMT-0400 (Eastern Daylight Time)"];

  function tileClassName({date, view) {
      // Check if a date React-Calendar wants to check is on the list of dates to add class to
    if (view === 'month') {
      if (datesToAddClassTo[0] === date.toString()) {
        console.log("Match found!!!!!");
        return 'myClassName';
      }
    }
  }

  const [value, setValue] = useState(new Date());
  
  function onChange(nextValue) {
    setValue(nextValue);
  }

  return (
    <Calendar
      onChange={onChange}
      value={value}
      tileClassName={tileClassName}
    />
  );

Answer 1

Try change to this:

function tileClassName(data) {
    const { _, date, view } = data;

    // Check if a date React-Calendar wants to check is on the list of dates to add class to
    if (view === 'month') {
        if (datesToAddClassTo[0] === date.toString()) {
            console.log("Match found!!!!!");
            return 'myClassName';
        }
    }
}

Then add style for .myClassName , and if it will not apply - add !important property.