How Children Types Work In React 18 And TypeScript 4

type ChildProps = {
  vegetables: string[]  
}

function MyComponent({ children }: { 
  children: React.ReactElement<ChildProps>
}) {
  React.Children.forEach(children, (child) => {
    console.log(child.props.vegetables) // no error!
    console.log(child.props.fruit)
    // error! Property 'fruit' does not exist on type 'ChildProps'
  })
}