I'm using the framer-motion library to animate a div mount

This is what I have:

(:require [framer-motion :refer (motion MagicMotion AnimateSharedLayout AnimatePresence useSpring useMotionValue useTransform useViewportScroll) :as motion])
(def div (.-div motion))

(defn my-component []
    [:> div {
      :initial {:opacity 0}
      :animate {:opacity 1}
      :exit {:opacity 0}} 
"Show Me"])

[:button {:on-click (change-show-my-component-boolean-to-true)}]
(if show-my-component? [my-component])

But the component doesn't show immediately when clicking the button when using :>div, although it does when using a regular :div, but in the latter case of course there's no animation

when using :>div, I have to re-focus or click somewhere on the webpage

For my-component to show

How do I fix this issue?