What React pattern does this code represent and how does TypeScript type it?

interface DialogProps {
  open: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

interface DialogComposition {
  Header: React.FC<{ children: React.ReactNode }>;
  Body: React.FC<{ children: React.ReactNode }>;
  Footer: React.FC<{ children: React.ReactNode }>;
}

const Dialog: React.FC<DialogProps> & DialogComposition = ({
  open,
  onClose,
  children,
}) => {
  if (!open) return null;
  return <div className="dialog">{children}</div>;
};

Dialog.Header = ({ children }) => <header>{children}</header>;
Dialog.Body = ({ children }) => <main>{children}</main>;
Dialog.Footer = ({ children }) => <footer>{children}</footer>;