Using Form-2 Reagent components with r/as-element in this template

[kovasap]

I started a project off of this template and got the following error when trying to create a "Form-2" reagent component:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

My component looks like:

(defn render-tile
  [_]
  (let [placing @(rf/subscribe [:placing])
        hovered (r/atom false)]
    (fn [tile]
      [:div.tile {:class         (:type tile)
                  :style         {:opacity (cond @hovered 1.0
                                                 placing  0.7
                                                 :else    0.4)}
                  :on-mouse-over #(reset! hovered true)
                  :on-mouse-out  #(reset! hovered false)
                  :on-click      #(if placing
                                    (rf/dispatch [:place/tile
                                                  (:row-idx tile)
                                                  (:col-idx tile)])
                                    nil)}])))

I think what's going on here is that this template uses r/as-element to render the page, which maybe requires all its input to be pure hiccup, not functions that reagent will call when state changes.

Is there a reason why this function was used here? Is there another way to get a "Form-2" component working?

In my situation, I'd like to use the local hovered state to manage my component's display instead of storing it in the reframe db or another global atom.