Comment in JSX counted as a child when it shouldn't be

[aweary]

TypeScript Version: Nightly

Search Terms: React, JSX, Comment, React.ReactElement

Code

import * as React from 'react'

interface Props {
    children: React.ReactElement
}

function Wrapper(props: Props) {
    return <div>{props.children}</div>
}

const element = (
    <Wrapper>
    {/* comment */}
     <div>Hello</div>
    </Wrapper>
)

Expected behavior: The {/* comment */} should be ignored by the type checker as it is completely stripped away when the JSX is compiled

Actual behavior: The comment is considered a child of Wrapper and a type error is thrown as Wrapper expects a single React.ReactElement child

Playground Link: https://www.typescriptlang.org/play?ts=4.1.0-dev.20201015#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQFA3AB2MWUBeWcACsWOgN404QuLgAWwADYATSgwBcmKjAB02PDACiErCCxMaAXzoEArg3zAIDOAHUoyMGBYAKMD1QLuEXgEo4A4ThKGBMoawAeKWAANwA+PjdvVGUxSRk9A3CAeii4wzpcK1R4LG1dJjgAXjhnQWFwuwcnKFi6oT4spEKQcvgELKNAuEiY2IAJUokIbNzWwOzGxxZWnyA

Related Issues: N/A