Wrap components inside a wrapper component conditionally in reactjs

Question

I am working on a generic component which has some sub-components that are wrapped into the main component like this:

<Main>
    <Main.First />
    <Main.Second />
    <Main.Third />
</Main>

The main point here is that I want to prevent any component which is not Main. from being wrapped into the component so for instance:

<Main>
  <span>any random text</span>
</Main>

This should return an error. I am using react.cloneElement to render the child components of the Main component and I want to add this condition. Here is how I loop over it

React.Children.toArray(children).map(child => child)

Any ideas?

Thanks in advance.