push()メソッドでルーティングするさいに、CSSTransitionを適応するには。

Question

###push(path)メソッドでルーティングするさいに、CSSTransitionを適応するには。
お世話になっております。
私は「push()メソッドでルーティングする」とき「前のコンポーネントがフェードアウトしたあとで遷移する」ような動作を実現したいと思いました。

そして公式のサイトを参考に(https://reactcommunity.org/react-transition-group/css-transition)
以下のようなコードを作りました。

export default function Town(props) {
    const [inProp, setInProp] = useState(true);

   //略
    return (
        <CSSTransition in={inProp} timeout={2000} classNames="my-node">
            <div className="Town" onClick={(e) => {
                setInProp(false);
                store.dispatch(push(path));//実際にはactioncreatorるが使っているが便宜的に・・・
            }}>
                //子要素
            </div>
        </CSSTransition>
    );
}

.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

しかしこれを実行しても、ただ遷移するだけでアニメーションは適応されませんでした。

おそらく再レンダーされる前に遷移されてしまうからだと思うのですが、だとしたらどうすればpush()メソッドでCSSTransitionを適応できるのでしょう？

一応react-routerとともにアニメーションするのも見つけたのですが
(https://reactcommunity.org/react-transition-group/with-react-router)
私はpush()メソッドでルーティングしているので参考になりませんでした。

これはどうすればいいのでしょうか？アドバイス、または参考となるサイトだけでもいいので、教えていただけると助かります。