Discriminant Unions and React props - why,how,what ?

[Hotell]

type Props =
  | { moo: string; children: React.ReactChild }
  | { as: 'button'; foo: number; children: React.ReactChild }

function Button(props: Props) {
  return <React.Fragment>{props.children}</React.Fragment>
}

function App(){
return <>
 <Button as="button" foo={12312}>hello</Button>
 /* NO ERROR */
 <Button moo="what" foo={13333}>world</Button>
</>
}

Let's cover how it can be solved ;)