React className クラス管理

クラス名の管理

import { useEffect, useState } from "react";
import classNames from "classnames";
import "./style.scss";

export const Button = (props) => {
  const [isClicked, setIsClicked] = useState(false);
  const [isClicked2, setIsClicked2] = useState(false);
  const { bgColor, children } = props;
  const OnClickFun = () => {
    console.log("クリックされたよ");
    setIsClicked(!isClicked);
  };
  const OnClickFun2 = () => {
    console.log("クリック2されたよ");
    setIsClicked2(!isClicked2);
  };

  const buttonClassName = classNames("button", { "red-button": isClicked });

  const style = {
    //  backgroundColor: bgColor,
    color: "white",
  };

  return (
    <>
      <button className={buttonClassName} style={style} onClick={OnClickFun}>
        {children}
      </button>
      <button className={buttonClassName} style={style} onClick={OnClickFun2}>
        {children}
      </button>
      {isClicked && <p>クリックされたら表示するテキスト</p>}
      {!isClicked && <p>閉じたよ</p>}
    </>
  );
};