React Functional Component doesnt render modifiers but ClassComponent renders modifiers in multiple days and custom styling

[ghost]

I am trying to select multiple days with multiple states, for example, user will select the kind of selection (sick, vacation, off-duty etc.) and after that will select multiple days. Each will have different colors. So I used modifiers. Class Component works well however functional components doesnt render on clicking day, it only renders when using buttons to change the current kind of selection (holiday, vacation, etc).
Can you help me please, Class Components are struggling, I need to use Functional Component.
Thanks in advance.
(Please share your ideas on my coding, I need simple codes)

import React, { useState } from "react";
import DayPicker, { DateUtils } from "react-day-picker";
import { Grid, Button } from "@material-ui/core";

import { makeStyles } from "@material-ui/core/styles";
import { attendanceSave } from "../../redux/actions/attendanceActions";
import { useDispatch } from "react-redux";

const useStyles = makeStyles({
  izin: {
    boxShadow: "0 3px 5px 2px darkred",
  },
  hastalık: {
    boxShadow: "0 3px 5px 2px darkgreen",
  },
  tatil: {
    boxShadow: "0 3px 5px 2px #c4aa00",
  },
});

const Calendar = ({ ids }) => {
  const classes = useStyles();
  const [selectedDays, setSelectedDays] = useState({
    izin: [],
    hastalık: [],
    tatil: [],
  });
  const [kind, setKind] = useState("izin");

  const dispatch = useDispatch();

  const handleDayClick = (day, { selected }) => {
    const tempDays = selectedDays;
    if (selected) {
      const selectedIndex1 = tempDays["izin"].findIndex((selectedDay) =>
        DateUtils.isSameDay(selectedDay, day)
      );
      selectedIndex1 !== -1 && tempDays["izin"].splice(selectedIndex1, 1);
      const selectedIndex2 = tempDays["hastalık"].findIndex((selectedDay) =>
        DateUtils.isSameDay(selectedDay, day)
      );
      selectedIndex2 !== -1 && tempDays["hastalık"].splice(selectedIndex2, 1);
      const selectedIndex3 = tempDays["tatil"].findIndex((selectedDay) =>
        DateUtils.isSameDay(selectedDay, day)
      );
      selectedIndex3 !== -1 && tempDays["tatil"].splice(selectedIndex3, 1);
    } else {
      tempDays[kind].push(day);
    }
    setSelectedDays(tempDays);
  };

 
  const modifiers = {
    izin: selectedDays["izin"],
    tatil: selectedDays["tatil"],
    hastalık: selectedDays["hastalık"],
  };
  const modifiersStyles = {
    izin: {
      color: "white",
      backgroundColor: "#ea0034",
    },
    hastalık: {
      color: "white",
      backgroundColor: "#009688",
    },
    tatil: {
      color: "white",
      backgroundColor: "#fad817",
    },

    outside: {
      backgroundColor: "white",
    },
  };

  return (
    <Grid container spacing={6}>
      <Grid item xs={6}>
        <div>
          <Button
            style={{
              backgroundColor: `#ea0034`,
              margin: `1rem`,
              color: "white",
            }}
            className={kind === "izin" ? classes.izin : null}
            onClick={() => setKind("izin")}
          >
            İzin
          </Button>
          <Button
            style={{
              backgroundColor: `#009688`,
              margin: `1rem`,
              color: "white",
            }}
            onClick={() => setKind("hastalık")}
            className={kind === "hastalık" ? classes.hastalık : null}
          >
            Hastalık
          </Button>
          <Button
            style={{
              backgroundColor: `#fad817`,
              margin: `1rem`,
              color: "white",
            }}
            className={kind === "tatil" ? classes.tatil : null}
            onClick={() => setKind("tatil")}
          >
            Tatil
          </Button>
        </div>
        <DayPicker
          selectedDays={Object.values(selectedDays).flat()}
          onDayClick={handleDayClick}
          modifiers={modifiers}
          modifiersStyles={modifiersStyles}
        />
      </Grid>
      <Grid item xs={6}>
        <div>
          <Button
            variant="contained"
            color="primary"
            onClick={() => dispatch(attendanceSave(ids, selectedDays))}
          >
            Kaydet
          </Button>
        </div>
      </Grid>
    </Grid>
  );
};

export default Calendar;




import React, { useState } from "react";
import DayPicker, { DateUtils } from "react-day-picker";
import { Grid, Button } from "@material-ui/core";

import { makeStyles } from "@material-ui/core/styles";
import { attendanceSave } from "../../redux/actions/attendanceActions";
import { useDispatch } from "react-redux";

const useStyles = makeStyles({
  izin: {
    boxShadow: "0 3px 5px 2px darkred",
  },
  hastalık: {
    boxShadow: "0 3px 5px 2px darkgreen",
  },
  tatil: {
    boxShadow: "0 3px 5px 2px #c4aa00",
  },
});

export default class Calendar extends React.Component {
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
    this.state = {
      selectedDays: {
        izin: [],
        hastalık: [],
        tatil: [],
      },
      kind: "izin",
    };
  }

  handleDayClick(day, { selected }) {
    const tempDays = this.state.selectedDays;

    if (selected) {
      const selectedIndex1 = tempDays["izin"].findIndex((selectedDay) =>
        DateUtils.isSameDay(selectedDay, day)
      );
      selectedIndex1 !== -1 && tempDays["izin"].splice(selectedIndex1, 1);
      const selectedIndex2 = tempDays["hastalık"].findIndex((selectedDay) =>
        DateUtils.isSameDay(selectedDay, day)
      );
      selectedIndex2 !== -1 && tempDays["hastalık"].splice(selectedIndex2, 1);
      const selectedIndex3 = tempDays["tatil"].findIndex((selectedDay) =>
        DateUtils.isSameDay(selectedDay, day)
      );
      selectedIndex3 !== -1 && tempDays["tatil"].splice(selectedIndex3, 1);
    } else {
      tempDays[this.state.kind].push(day);
    }

    this.setState({ selectedDays: tempDays });
  }

  render() {
    //const classes = useStyles();
    const modifiers = {
      izin: this.state.selectedDays["izin"],
      tatil: this.state.selectedDays["tatil"],
      hastalık: this.state.selectedDays["hastalık"],
    };
    const modifiersStyles = {
      izin: {
        color: "white",
        backgroundColor: "#ea0034",
      },
      hastalık: {
        color: "white",
        backgroundColor: "#009688",
      },
      tatil: {
        color: "white",
        backgroundColor: "#fad817",
      },

      outside: {
        backgroundColor: "white",
      },
    };

    return (
      <div>
        <DayPicker
          selectedDays={Object.values(this.state.selectedDays).flat()}
          onDayClick={this.handleDayClick}
          modifiers={modifiers}
          modifiersStyles={modifiersStyles}
        />
        <div>
          <Button
            style={{
              backgroundColor: `#ea0034`,
              margin: `1rem`,
              color: "white",
            }}
            //className={this.state.kind === "izin" ? classes.izin : null}
            onClick={() => this.setState({ kind: "izin" })}
          >
            İzin
          </Button>
          <Button
            style={{
              backgroundColor: `#009688`,
              margin: `1rem`,
              color: "white",
            }}
            onClick={() => this.setState({ kind: "hastalık" })}
            //className={this.state.kind === "hastalık" ? classes.hastalık : null}
          >
            Hastalık
          </Button>
          <Button
            style={{
              backgroundColor: `#fad817`,
              margin: `1rem`,
              color: "white",
            }}
            //className={this.state.kind === "tatil" ? classes.tatil : null}
            onClick={() => this.setState({ kind: "tatil" })}
          >
            Tatil
          </Button>
        </div>
      </div>
    );
  }
}