React+Material UIにおける、ボタン押下時の@keyframesアニメーション②

初めに

ボタン押したときにkeyframeで設定しているアニメーションを発動
①と違って、ページ表示時にアニメーションが動きません

こんな感じのもの

ボタンを押すと、領域が拡大or縮小します

コード

import { useState } from "react";
import { Box, Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

// classオブジェクト定義
const useStyles = makeStyles(() => ({
  // 開閉共通のclass(jsx側に設定)
  commonItem: {
    backgroundColor: "#ff0000",
    width: "200px",
    height: "120px", // 初期値
  },
  // 開いているときのclassオブジェクト(jsx側に設定)
  openedItem: {
    animation: `$openEffect 1000ms`, // 1000ミリ秒
    height: "120px",
  },
  // 閉じているときのclassオブジェクト(jsx側に設定)
  closedItem: {
    animation: `$closeEffect 1000ms`, // 1000ミリ秒
    height: "40px",
  },
  // 開く時の動作
  "@keyframes openEffect": {
    "0%": {
      height: "40px",
    },
    "100%": {
      height: "120px",
    },
  },
  // 閉じるときの動作
  "@keyframes closeEffect": {
    "0%": {
      height: "120px",
    },
    "100%": {
      height: "40px",
    },
  },
}));

// コンポーネント
const TestContents = () => {
  // classオブジェクト生成
  const classes = useStyles();
  // 開閉のフラグ
  const [isOpen, setIsOpen] = useState(false);
  // クラスオブジェクト切り替え
  const [toggleClass, setToggleClass] = useState(null);
  // エリア切り替え
  const ToggleArea = () => {
    if (isOpen) {
      setToggleClass(classes.openedItem);
    } else {
      setToggleClass(classes.closedItem);
    }
    setIsOpen(!isOpen);
  };

  return (
    <>
      {/* 開閉、共通のclassを設定 */}
      <Box className={[toggleClass, classes.commonItem]}>
        {/* 開閉ボタン(設定値と逆のフラグを設定) */}
        <Button onClick={() => ToggleArea()}>開閉</Button>
      </Box>
    </>
  );
};

export default TestContents;

最後に

ところどころ変数化した方が良い値はあるけど、そこはウマいことやってもらえれば、、、
初回、勝手に動く方が機能を認識できて良いのかも、、？