Как типизировать `children` в компоненте и зачем нужна композиция в React?

import type { ReactNode, ReactElement } from "react";

// Container component: provides the frame, doesn't decide the content
type CardProps = {
  title: string;       // text only: we use it as-is
  icon?: ReactNode;    // a component passed via props
  children: ReactNode; // anything renderable
};

function Card({ title, icon, children }: CardProps) {
  return (
    <section className="card">
      <header>{icon}<h2>{title}</h2></header>
      <div className="card-body">{children}</div>
    </section>
  );
}

// ReactElement: here we require JSX, a string won't compile
function Modal({ content }: { content: ReactElement }) {
  return <div className="modal">{content}</div>;
}

// Usage: the same container works for very different content
// <Card title="Profile" icon={<span aria-hidden>*</span>}>
//   <p>Name: Ana</p>
// </Card>
// <Card title="Notice">Just some plain text</Card>
// <Modal content={<p>Confirm action</p>} />
// <Modal content="hello" />
// Error: Type 'string' is not assignable to type 'ReactElement'

type CardProps = { children: string }; // too restrictive

// <Card><p>Hello</p></Card>
// Error: Type 'Element' is not assignable to type 'string'

import type { ReactNode } from "react";

type CardProps = { children: ReactNode }; // accepts text, JSX, arrays, null...
// Mental rule: for children, ReactNode is the default choice