hookを使ったMaterialUIのハートアイコンのON・OFF

import { React, useState } from "react";
import { IconButton } from "@material-ui/core";
import FavoriteIcon from "@material-ui/icons/Favorite";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";


const Demo = () => {

//ハートの状態を管理するfavoを定義(初期値はfalse)
  const [favo, setFavo] = useState(false);

//アイコンをクリックしたらfavoのtrueとfalseが切り替わる関数を作成
const handleClick = () => {
  if (favo === false) {
      setFavo(true);
    } else {
      setFavo(false);
    }
  };

//trueなら<FavoriteBorderIcon  />をfalseなら<FavoriteIcon color={"secondary"} />を描画
return(
 <>
      <IconButton
        onClick={() => handleClick()}
      >
        {favo ? <FavoriteIcon color={"secondary"} /> : <FavoriteBorderIcon />}
      </IconButton>
　</>
)
}
export default Demo