When to use JSX.Element, ReactNode and ReactElement in TypeScript?

Hello everyone! I started learning React with TypeScript and encountered confusion with types for component return values and props.\n\nHere's a simple component:\n\n```typescript\ninterface Props {\n children: ???; // What to write here?\n icon: ???; // And here?\n}\n\nfunction Card({ children, icon }: Props) {\n return (\n \n );\n}\n```\n\nI've seen three types in different projects: `JSX.Element`, `ReactNode` and `ReactElement`. They seem to be used for the same thing, but not exactly.\n\nFor example, I know that:\n- `ReactNode` can be used for children\n- `JSX.Element` is returned from functional components\n- `ReactElement` is the base type\n\nBut when I write:\n\n```typescript\nfunction MyComponent(): JSX.Elem