Hello guys! I'm playing around with cljs/reagent/re-frame <-> js interop these days, and I've stumbled upon a problem that I cannot understand. I'm using tanstack/react-table like this:

(def columns
  [...
   {:accessorKey "status"
    :header "Status"
    :cell
    (fn [props]
      (println "RERENDERRR")
      ...]))))}
   ...])

(defn data-table [{:keys [columns data]}]
  (let [columns (clj->js columns)
        data (clj->js data)
        table (useReactTable #js {:data data
                                  :columns columns
                                  :getCoreRowModel (getCoreRowModel)})]
    [:div {:class "rounded-md border"}
     [:> Table
      [:> TableHeader
       (for [header-group (.getHeaderGroups table)]
         [:> TableRow {:key (.-id header-group)}
          (for [header (.-headers header-group)]
            [:> TableHead {:key (.-id header)
                           :colSpan (.-colSpan header)
                           :style {:width (str (.getSize header) "px")}}
             (when-not (.-isPlaceholder header)
               (flexRender (.. header -column -columnDef -header) (.getContext header)))])])]
      [:> TableBody
       (let [rows (.-rows (.getRowModel table))]
         (if (and rows (pos? (.-length rows)))
           (for [row rows]
             [:> TableRow {:key (.-id row)
                           :data-state (and (.getIsSelected row) "selected")}
              (for [cell (.getVisibleCells row)]
                [:> TableCell {:key (.-id cell)}
                 (flexRender (.. cell -column -columnDef -cell) (.getContext cell))])])
           [:> TableRow
            [:> TableCell {:colSpan (.-length columns)
                           :class "h-24 text-center"}
             "No results."]]))]]]))

(defn tasks-page []
  (let [tasks @(rf/subscribe [::subs/tasks])]
    [:div {:class "flex h-full flex-1 flex-col space-y-8 p-8"}
     ...
     [:f> data-table {:columns columns :data tasks}]]))