Use JSX pragma for declarative config like Compound Components

slot-example.jsx

/** @jsx slot */

const selectConfig = (
  <group title="Members" element={<MemberGroup />}>
    <option>
      First Option
    </option>
    <divider />
    {members.map((member) => (
      <option element={<SuggestionOption member={member} />}>
        <div>
          Member {member}
        </div>
      </option>
    ))}
  </group>
);

Babel Output

"use strict";

/** @jsx slot */
const selectConfig = slot(
  "group",
  {
    title: "Members",
    element: slot(MemberGroup, null)
  },
  slot("option", null, "First Option"),
  slot("divider", null),
  members.map((member) =>
    slot(
      "option",
      {
        element: slot(SuggestionOption, {
          member: member
        })
      },
      slot("div", null, "Member ", member)
    )
  )
);