wrap children for react component which has children restricted to certain types

I have a component that I restricted to have certain types of children using flow types. However, now I have several situations where it is convenient to wrap those components in other component that just returns one of the valid components but with some defaults attached. Even grouping some of those valid components using react fragments gives me weird errors that I am unable to debug.

Here is a piece of sample code (that you can run on flow playground):

//@flow
import React from 'react'
import type { Node, Element, ChildrenArray } from 'react'

type ItemType = Element<typeof ListItem | typeof ListHeader>

type Props = {
  children: ChildrenArray<ItemType>,
}

function List({ children }: Props) {
  return <div>{children}</div>
}

type ItemProps = {
  children: Node,
  onClick?: () => void,
}

function ListItem({ children, onClick }: ItemProps) {
  return <div onClick={onClick}>{children}</div>
}

type HeaderProps = {
  children: Node,
}

function ListHeader({ children }: HeaderProps) {
  return <div>{children}</div>
}

const Row = ({ left, right }: { left: string, right: Node }): Node => {
  return (
    <ListItem>
      {left}
      <span>{right}</span>
    </ListItem>
  )
}

const x = () => (
  <List>
    <Row left="gender" right="${gender}" />
    <Row left="birthDate" right="xxx" />
    <Row left="Number" right="xxx" />
    <Row left="sendEnrollmentLetter" right="stuff" />
  </List>
)

What is the correct way of following such pattern?

On flow playground you will not see errors because, if you open the console you will see that it just blows up.

This is the concrete error I’m getting on my project:

Cannot create `List` element because in array element of property `children`: 
Either property `children` is missing in  object type [1] but exists in  `HeaderProps` [2] in property `props`. 
Or property `children` is missing in  object type [1] but exists in  `ItemProps` [3] in property `props`.

const Wrapper = (): Node => (
  <>
    <Foo disabled />
    <Bar />
  </>
);

const Defaults = (): Node => <Foo disabled={false} />;

const x = (
  <Parent>
    <Wrapper />
    <Wrapper />
    <Defaults />
  </Parent>
);