help! i barely understand react and i’m trying to get a listbox working (using headlessui) what am i doing wrong

(def people [{:id 1, :name "Wade Cooper"}
             {:id 2, :name "Arlene Mccoy"}
             {:id 3, :name "Devon Webb"}
             {:id 4, :name "Tom Cook"}
             {:id 5, :name "Tanya Fox"}
             {:id 6, :name "Hellen Schmidt"}])


(defnc my-listbox []
  (let [[state set-state] (hooks/use-state (second people))]
    (<> ($ ui/Listbox {:value state :onChange set-state
                   :className "border"}
       ($ ui/Listbox.Button {:className "text-xs text-red-500 border border-blue-500 rounded m-4 p-4 shadow-2xl"}
          (:name state))
        ($ ui/Listbox.Options
              (for [p people]
               (<> ($ ui/Listbox.Option {:key (:id p) :value p
                                      :className "ui-active:bg-blue-500"}
                   ($ ui/CheckIcon :className "hidden ui-selected:block")
                   (:name p)))))))))

Uncaught Error: Passing props on "Fragment"!

The current component <Listbox /> is rendering a "Fragment".
However we need to passthrough the following props:
  - className
  - ref

You can apply a few solutions:
  - Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".
  - Render a single element as the child so that we can forward the props onto that element.

I think you do not need fragment <> inside Listbox.Options since Listbox.Option is enclosing CheckIcon, therefore is one element. We usually use <> or div to group elements.