<Menu trigger={(p) => (
  <button class="btn icon" {...p}>
    <UserIcon class="size-6" />
  </button>
)}>

<Menu trigger={(p) => (
  <button class="btn icon" {...p}>
    <UserIcon class="size-6" />
  </button>
)}>

const Menu = (p: {
  trigger?: (p: { ref: () => void; onClick: () => void }) => JSX.Element;
  // ...
}) => {

const Menu = (p: {
  trigger?: (p: { ref: () => void; onClick: () => void }) => JSX.Element;
  // ...
}) => {

<>
  {p.trigger?.({ ref: setReference, onClick: () => setOpen(!open()) })}
</>

<>
  {p.trigger?.({ ref: setReference, onClick: () => setOpen(!open()) })}
</>