with-grouped-attributes.tsx

import React from 'react';
import { map, groupBy } from 'lodash';

interface SelectableOption {
  key: string;
  items: unknown[];
}

interface WithGroupedAttributes {
  selectableOptions: SelectableOption[];
}

const withGroupedAttributes = <P extends object>(
  Component: React.ComponentType<P>
): React.FC<P> => ({
  selectableOptions,
  ...restProps
}: P & WithGroupedAttributes) => (
  <Component
    {...({
      ...restProps,
      selectableOptions: map(groupBy(selectableOptions, 'key'), (obj, key) => ({
        key,
        items: obj,
      })),
    } as P)}
  />
);

export default withGroupedAttributes;