Composition Pattern in React

What is composition in React? Composition is a pattern where components are tied up together like building blocks to create complex UIs. Instead of relying too much on props and foul yourself that if you add one more prop the component will then be more customizable, you should always try to use this pattern whenever possible to avoid and minimize the amount of props your component has. Take a look at the following ConfiguredModal.tsx component, starting with the necessary types: type ConfiguredModalProps = { isOpen: boolean; onClose: () => void; title?: string; withDelimiter?: boolean; withFooter?: boolean; children: React.ReactNode; headerActions?: () => React.ReactNode; // edit button, download // ... more props }; For the sake of simplicity and to not scare you with too much CSS, I will hide the className attributes from all the elements. export default function ConfiguredModal({ isOpen, onClose, headerActions, title, withDelimiter, withFooter, children, }: ConfiguredModalProps) {