react-transition-group使ってみた

import { useState } from "react";
import { CSSTransition } from "react-transition-group";
import styled from "@emotion/styled";

const MyStyles = styled.div`
    .fade-enter-done {
      background: red;
      height: 100px;
    }
    
    .fade-enter {
      height: 0;
      overflow: hidden;
    }

    .fade-enter-active {
      transition: height 1s;
      background: green;
      height: 100px;
    }
`;

export const  App = () => {
  const [animate, setAnimate] = useState(false);
  return (
    <MyStyles>
      <button onClick={() => setAnimate((prev) => !prev)}>
        {animate ? "falseにする" : "trueにする"}
      </button>
      <CSSTransition classNames="fade" in={animate} timeout={1000} unmountOnExit>
        {(state) => {
          return <h1>{state}</h1>;
        }}
      </CSSTransition>
    </MyStyles>
  );
}