Time tracking dashboard built with React and Sass

Is there a way to dynamically change classNames in react onClick? I used state for this, which seemed unnecessarily cumbersome, see below code (in components/MainCard.js):

//display "active" state of timeframe dynamically
  const [dailyIsActive, setDailyIsActive] = useState(true);
  const [weeklyIsActive, setWeeklyIsActive] = useState(false);
  const [monthlyIsActive, setMonthlyIsActive] = useState(false);

  const timeFrames = [
    { id: 1, type: "Daily", active: dailyIsActive },
    { id: 2, type: "Weekly", active: weeklyIsActive },
    { id: 3, type: "Monthly", active: monthlyIsActive },
  ];

  const clickHandler = (event) => {
    const clickedTimeframe = event.target.innerText.toLowerCase();
    switch (clickedTimeframe) {
      case "daily":
        setDailyIsActive(true);
        setWeeklyIsActive(false);
        setMonthlyIsActive(false);
        break;
      case "weekly":
        setWeeklyIsActive(true);
        setDailyIsActive(false);
        setMonthlyIsActive(false);
        break;
      case "monthly":
        setMonthlyIsActive(true);
        setDailyIsActive(false);
        setWeeklyIsActive(false);
        break;
      default:
        setDailyIsActive(true);
        setWeeklyIsActive(false);
        setMonthlyIsActive(false);
        break;
    }
  };

          <p
            onClick={clickHandler.bind(this)}
            key={timeFrame.id}
            className={timeFrame.active ? `${styles.active}` : ""}
          >
            {timeFrame.type}
          </p>