`Option` Not working as a wrapped component

[ashleyryan]

When I have some custom logic I want to put in an Option, I may want to extra that to a separate component for easy-reuse. Imagine an extremely contrived example:

const CheckboxOption = ({ label, value }) => (
  <Option value={value} label={label}>
    🎉 {label}
  </Option>
);

const  MySelect = ({options, setValue, value}) =>  (
  <Select onChange={v => setValue(v)} optionLabelProp="label" value={value}>
      {options.map(o => (
        <CheckboxOption {...o} />
      ))}
  </Select>
);

This won't work, the custom emoji doesn't render, and we only see the label get rendered.

However, if I call the function component like a function, it does work and the custom option is rendered:

const  MySelect = ({options, setValue, value}) =>  (
  <Select onChange={v => setValue(v)} optionLabelProp="label" value={value}>
     {options.map(o => CheckboxOption({ ...o }))}
  </Select>
);

It appears that the Option must be a direct child of Select and it does not work when wrapped.

Is this intentional? While calling it like a function isn't a huge deal in this example, if I wanted to use hooks in the component for anything, it wouldn't work.

I have a stackblitz with the issue here: https://stackblitz.com/edit/react-4dhwku