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

¡Hola! Empecé a aprender TypeScript junto con React y constantemente me confundo con los tipos para describir lo que puede ser devuelto desde un componente o pasado como children. En internet encuentro a menudo tres tipos: `JSX.Element`, `ReactNode` y `ReactElement`. Pero cuándo usar cuál es un misterio para mí. Por ejemplo, escribo un componente wrapper: ```typescript interface WrapperProps { children: ??? // ¿Qué poner aquí? } ``` O cuando quiero especificar explícitamente el tipo de retorno de una función componente: ```typescript const MyComponent = (): ??? => { return ; }; ``` Intenté usar `ReactNode`, pero entonces TypeScript se queja cuando intento pasar algo como un array de componentes. Luego probé `JSX.Element` — parece funcionar, pero no estoy seguro de que sea correcto. Y sobre `ReactElement` no entiendo para qué sirve. Expliquen, por favor, de manera sencilla: ¿cuál es la diferencia entre estos tres tipos y en qué situaciones usar cada uno? Estaré muy agradecido por la ayuda.