Why the compiler does allow to compile?

Question

I have created the following component:

export default function IdeaInfos({children}: { children: ReactElement<IdeaInfoProp, typeof IdeaInfo> }) {
    const classes = useStyles()

    return (
        <Grid container
              justify="center"
              alignItems="center"
              className={classes.wrapper}>
            {children}
        </Grid>
    )
}

The component should restrict the type of the passed children, in this case is(this is how I expect to be), the children can only be the component of IdeaInfo and properties IdeaInfoProp.

However, when I use the component IdeaInfos

<IdeaInfos>
   <Typography>
       Hello
   </Typography>
</IdeaInfos>

it is also possible to pass Typography as a child of IdeaInfos. Why does the compiler not complain? I have done the type restriction.

Update

Sorry I forgot the share IdeaInfoProp and IdeaInfo:

export interface IdeaInfoProp {
    icon: string,
    text: string,
    textBgColor: string,
    alt: string
    reverse?: boolean,
}

export default function IdeaInfo({icon, text, textBgColor, alt, reverse = false}: IdeaInfoProp) {

    const classes = useStyles()

    return (
        <Grid item container xs={12} direction={reverse ? "row-reverse" : "row"}>
            <Grid item xs={12} md={6} style={{background: `${textBgColor}`}}>
                <Typography className={classes.text} variant="h4">
                    {text}
                </Typography>
            </Grid>
            <Grid
                item
                xs={12}
                md={6}
                container
                justify="center"
                alignItems="center"
            >
                <img src={icon} alt={alt} className={classes.mediaIcon}/>
            </Grid>

        </Grid>
    )

}

I have took Typography just for demonstration but it comes from https://material-ui.com/components/typography/#typography