Error: Passing props on "Fragment"!

The current component <Menu.Item /> is rendering a "Fragment".
However we need to passthrough the following props:
  - id
  - role
  - tabIndex
  - aria-disabled
  - disabled
  - onClick
  - onFocus
  - onPointerMove
  - onMouseMove
  - onPointerLeave
  - onMouseLeave

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.
    at d (bundle.js:2)
    at u (bundle.js:2)
    at e (bundle.js:2)
    at io (bundle.js:2)
    at Ks (bundle.js:2)
    at Nl (bundle.js:2)
    at yl (bundle.js:2)
    at bl (bundle.js:2)
    at fl (bundle.js:2)
    at bundle.js:2
_0x2d4857.<computed> @ /Applications/Sizzy.app/Contents/Resources/app.asar/build/plugins.js:1
overrideMethod @ react_devtools_backend.js:2430
ss @ bundle.js:2
n.callback @ bundle.js:2
Ci @ bundle.js:2
ps @ bundle.js:2
Al @ bundle.js:2
t.unstable_runWithPriority @ bundle.js:2
Ka @ bundle.js:2
Ml @ bundle.js:2
fl @ bundle.js:2
(anonymous) @ bundle.js:2
t.unstable_runWithPriority @ bundle.js:2
Ka @ bundle.js:2
Ya @ bundle.js:2
za @ bundle.js:2
Rl @ bundle.js:2
t.unstable_runWithPriority @ bundle.js:2
Ka @ bundle.js:2
xl @ bundle.js:2
(anonymous) @ bundle.js:2
V @ bundle.js:2
E.port1.onmessage @ bundle.js:2

ACtually upon further inspection I think the problem is lower in the hierarchy: JS:

The menu-* components are from @headless-ui and adapted to reagent

And when I click the button the open the menu (rendering menu-items it crashes)

Within the function that returns [:a ...], wrap that vector into reagent.core/as-element. Also, don't use aget to retrieve a value of a JS object's property. Just use interop: (.-active ^js menu-context).

Is the interop better or just idiomatic? Thank you for the response, I will implement it

At the very least, aget is for arrays. JS object field access is not an array indexing operation.

Hei man, also, just for me to try and understand reagent better: Why was it necessary to do r/as-element on that form. Is it that because the menu-item is just a wrapper around a native react component, reagent won't go further down to parse forms that are children to native components? It actually makes sense that it doesn't

Something like that, yeah. When you pass a function to some React component that's supposed to return a React element, it has to, well, return a React element. A Hiccup vector is not a React element, so you have to turn it into one manually. Reagent can't look inside arbitrary functions and guess what's supposed to be a React element and what's a regular CLJS vector.

Yeah, this makes a lot of sense. Thank you a lot for the answers 🙏