Reagent CSSTransitionGroup on elements that are not in a list

.cljs

(ns animation.core
    (:require [reagent.core :as reagent]))

(enable-console-print!)

(def css-transition-group
  (reagent/adapt-react-class js/React.addons.CSSTransitionGroup))

(def style
  ".my-item {
    color: red;
    background-color: #000;
    /* Define transition on the 'opacity' property. */    
    transition: opacity .5s ease-in;
  }

  .my-item.switch-enter {
      opacity: 0.01;
  }
  .my-item.switch-enter.switch-enter-active {
      opacity: 1.0;
  }
  .my-item.switch-leave {
      /* Completely hide the .my-item while it's being animated 
      and before it's removed from the DOM. */
      visibility: hidden;
      height: 0px;
      width: 0px;
      
      /* Starting opacity */
      opacity: 1.0;
  }
  .my-item.switch-leave.switch-leave-active {
      /* Ending opacity: 
      Trigger opacity change so the 'transitionend' event will fire, 
      causing React to remove from the DOM. */
      opacity: 0;
  }")

(def app-state
  (reagent/atom {:show false}))

(defn add-item []
  (swap! app-state assoc :show true))

(defn delete-item []
  (swap! app-state assoc :show false))

(defn home []
  [:div
    [:button {:on-click #(add-item)} "add"]
    [:button {:on-click #(delete-item)} "delete"]
    [:style style]
    [css-transition-group {:transition-name "switch"}
      (if (get @app-state :show)
        [:li {:class "my-item" :key (get @app-state :show)} "Hello"]
        [:li {:class "my-item" :key (get @app-state :show)} "BYE"]      
      )]
  ]
)

(defn ^:export main []
  (reagent/render [home]
                  (.getElementById js/document "app")))