Cuándo usar JSX.Element, ReactNode y ReactElement en TypeScript

¡Hola a todos! Empecé a aprender React con TypeScript y me encontré con confusión sobre los tipos para valores de retorno de componentes y props. Aquí hay un componente simple: ```typescript interface Props { children: ???; // ¿Qué escribir aquí? icon: ???; // ¿Y aquí? } function Card({ children, icon }: Props) { return ( ); } ``` He visto en diferentes proyectos tres tipos: `JSX.Element`, `ReactNode` y `ReactElement`. Parecen usarse para lo mismo, pero no exactamente. Por ejemplo, sé que: - `ReactNode` se puede usar para children - `JSX.Element` es devuelto por componentes funcionales - `ReactElement` es el tipo base Pero cuando escribo: ```typescript function MyComponent(): JSX.Element { return ; // Funciona } function MyComponent2(): React.ReactNode { return ; // También funciona } ``` ¿Cuál es la diferencia? ¿Y qué tipo es correcto para la prop?