React component groups under one namespace

A nice way of exposing a set of related React (sub)components under one namespace:

export const Header = Object.assign(
  (props: PropsWithChildren) => {
    return (
      <div className="flex">
        {props.children}
      </div>
    );
  },
  {
    IconTitle: HeaderIconTitle,
    SectionItem: HeaderSectionsItem,
    Section: HeaderSections,
  }
);

With Header defined like this, the Header and it's sub components can be used like this:

export const MainPage = () => {
  return (
    <Header>
      <Header.IconTitle
        icon={<IconPretty />}
      />
      <Header.Section>
        <Header.SectionItem
          label="foo"
          value="foo"
        />
        <Header.SectionItem
          label="bar"
          value="bar"
        />
        <Header.SectionItem
          label="baz"
          value="baz"
        />
      </Header.Section>
    </Header>
  );
};