Clojurians Log v2

Hello, I am trying to implement https://docs.dndkit.com/presets/sortable

(ns views.components.sortable
  (:require [reagent.core :as r]
            ["react" :as react]
            ["@dnd-kit/core" :refer [DndContext
                                     closestCenter
                                     KeyboardSensor
                                     PointerSensor
                                     useSensor
                                     useSensors]]
            ["@dnd-kit/sortable" :refer [arrayMove
                                         SortableContext
                                         sortableKeyboardCoordinates
                                         verticalListSortingStrategy
                                         useSortable]]
            ["@dnd-kit/utilities" :refer [CSS]]))



(defn to-clj-map [hash-map]
  (js->clj hash-map :keywordize-keys true))

(defn SortableItem [props]
  (let [{:keys [attributes
                listeners
                setNodeRef
                transform
                transition]} (to-clj-map (useSortable {:id (.-id props)}))
        style {:transform (.toString (.-Transform CSS) transform)
               :transition transition
               :background "red"}]
    (r/as-element
      [:div (merge (merge {:ref setNodeRef
                           :style style} attributes) listeners)
       "hello : " (.-id props)])))

(defn sortable-example []
  (let [[items, setItems] (react/useState [1 2 3 4])
        sensors (useSensors
                  (useSensor PointerSensor)
                  (useSensor KeyboardSensor, {:coordinateGetter sortableKeyboardCoordinates}))
        handleDragEnd (fn [event]
                        (let [[active over] event]
                          (if (not= (.-id active) (.-id over))
                            (setItems
                              (fn [items]
                                (let [oldIndex (.indexOf items (.-id active))
                                      newIndex (.indexOf items (.-id over))]
                                  (arrayMove items oldIndex newIndex)))))))]
    (r/as-element
      [:> DndContext {:sensors sensors
                      :collisionDetection closestCenter
                      :onDragEnd handleDragEnd}
       [:> SortableContext {:items items
                            :strategy verticalListSortingStrategy}

        (map
          (fn [id] [:> SortableItem {:id id :key id}])
          items)]])))

(defn view []
  [:div
   [:h1 "Sortable example"]
   [:> sortable-example]])

I did it, maybe another developer will be happy about it, so here is the good version: https://gist.github.com/paul931224/76146d48a9e28b3f0d8218c436b01f4c