Why can't we type React children component with type alias?

Question

I would like to build nice UI API as compound component but strictly accept children that match my type.

I tried a lot of different things, but looks like @types/react doesn't allow it.

So here what I would like:

//app.ts
const App = () => 
 <Section>
    <div>Hello</div> <--- Compile Error 
    <Section.Title>Hello</Section.Title>
 </Section>

1. Attempt 1:

   // ui-libs
   const Title = (props: TitleProp): SectionChildren  => {
    const c = <>{props.children}</>
    return { _type: "section-children", ...c};
   }
   
   type SectionChildren = { _type: "section-children" } & ReactElement;
   
   type SectionProps = { children: SectionChildren | SectionChildren[] }
   const Section (props: SectionProps) => <>{props.children}</>
   
   Section.Title = Title
   
   export default Section
   

   Error on <Section.Title>{...}:

   Type 'Element' is not assignable to type 'SectionChildrenProps'.
     Property '_type' is missing in type 'Element' but required in type '{ _type: "section-children"; }'.ts(2322)
   

2. Attempt 2:

   // ui-libs
   const Title = (props: TitleProp): SectionChildren  => {
    const c = <>{props.children}</>
    return { _type: "section-children", ...c};
   }
   
   type SectionChildren = ReactElement<{ _type: 'b' }> | ReactElement<{ _type: 'b' }>[];
   
   type SectionProps = { children: SectionChildren | SectionChildren[] }
   const Section (props: SectionProps) => <>{props.children}</>
   
   Section.Title = Title
   
   export default Section
   

   No errors but doesn't do what I want.

I am pretty sure with the current state of @types/react we can't do what I want because of some type it's like <p = any> and stuff like that.