different ways to use two render props in one component

modal.jsx

// passing object to render with two fns (opener & content, for example)
<Modal>
  {{
    opener: ({ open }) => <button onClick={open}>Open Modal</button>,
    content: {{ close }) => <div><h2>Hi modal</h2> <button onClick={close}>Close me</button></div>
  }}
</Modal>
   
// passing as children array
// https://stackblitz.com/edit/react-array-render-props
<Modal>
  {({ open }) => <button onClick={open}>Open Modal</button>}
  {({ close }) => <div><h2>Hi modal</h2> <button onClick={close}>Close me</button></div>}
</Modal>

// passing in 2 different props (children & content, for example)
<Modal content={({ close }) => <div><h2>Hi modal</h2> <button onClick={close}>Close me</button></div>}>
  {({ open }) => <button onClick={open}>Open Modal</button>}
</Modal>

1st and 2nd will break compose utilities like react-adopt and powerplug's compose