Quando usar JSX.Element, ReactNode e ReactElement no TypeScript?

Olá a todos! Comecei a estudar React com TypeScript e me deparei com uma confusão nos tipos para valores de retorno de componentes e props.\n\nAqui está um componente simples:\n\n```typescript\ninterface Props {\n children: ???; // O que colocar aqui?\n icon: ???; // E aqui?\n}\n\nfunction Card({ children, icon }: Props) {\n return (\n \n );\n}\n```\n\nEu vi em diferentes projetos três tipos: `JSX.Element`, `ReactNode` e `ReactElement`. Eles são usados aparentemente para a mesma coisa, mas não exatamente.\n\nPor exemplo, eu sei que:\n- `ReactNode` pode ser usado para children\n- `JSX.Element` é retornado de componentes funcionais\n- `ReactElement` é o tipo base\n\nMas quando escrevo:\n\n```typescript\nfunction MyComponent(): JSX.Elem