Component to compose context providers and pass separate props to each of them

Compose.tsx

type Components =
  | React.ElementType
  | [React.ElementType, { [key: string]: unknown }];

const Compose = ({
  components,
  children,
}: {
  components: Components[];
  children: JSX.Element;
}) => (
  <>
    {components.reverse().reduce((acc, curr) => {
      const [Provider, props] = Array.isArray(curr)
        ? [curr[0], curr[1]]
        : [curr, {}];
      return <Provider {...props}>{acc}</Provider>;
    }, children)}
  </>
);

// example


export default function MemorialContextProviders({
  children,
  scraped,
}: {
  children: JSX.Element;
  scraped: boolean;
}) {
  return (
    <Compose
      components={[
        AddMemoryModalContextProvider,
        [ClaimModalContextProvider, { scraped }],
        VisitorContextProvider,
      ]}
    >
      {children}
    </Compose>
  );
}