Reactでboolean型以外のstateをトリガーにアニメーションは付けられますか。

Question

サンプル

string型のstateをセットするボタンと、セットされたstateに応じて描画するコンポーネントがあります。
動的に描画するコンポーネントに、マウント時とアンマウント時にアニメーションを付けたいと考えています。

そこでreact-transition-groupのドキュメントを読んでいたのですが、アニメーションのトリガーとなるstateはboolean型のみと読み取りました。
Transition

とすると動的に描画したいコンポーネントごとにboolean型のstateとsetStateを用意する必要が生じると思うのですが、boolean型以外のstateでもアニメーションのトリガーにすることが可能なのでしょうか。

react-transition-group以外のライブラリも、トリガーとなっているstateはboolean型になっているように見受けられました。

アニメーションの内容は同じにすることと、アニメーションのために管理するstateを増やすのは避けたいので、管理するstateをできるだけ少なくしたいと考えています。
また、シンプルにCSSでアニメーションが付けられればよいので、ライブラリの使用は絶対的な条件ではありません。

ソースコード

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [visible, setVisible] = useState("none");
  return (
    <Wrap>
      <button onClick={() => setVisible("A")}>A</button>
      <button onClick={() => setVisible("B")}>B</button>
      <hr />
      {visible === "A" && <A setVisible={setVisible} />}
      {visible === "B" && <B setVisible={setVisible} />}
    </Wrap>
  );
}

const A = ({ setVisible }) => {
  return (
    <StyleA>
      <h2>This is A.</h2>
      <button onClick={() => setVisible("none")}>close</button>
    </StyleA>
  );
};
const B = ({ setVisible }) => {
  return (
    <StyleB>
      <h2>This is B.</h2>
      <button onClick={() => setVisible("none")}>close</button>
    </StyleB>
  );
};

const Wrap = styled.div`
  button {
    cursor: pointer;
  }
`;
const StyleA = styled.div`
  background: red;
  padding: 1%;
`;
const StyleB = styled.div`
  background: blue;
  padding: 1%;
`;

Answer 1

boolean型以外のstateでもアニメーションのトリガーにすることが可能なのでしょうか。

はい、in={text === 'foo'}のように、他のpropなりstateなりを見て、判定した結果としてのbooleanを渡せば問題ないかと思います。