compose.tsx

import React, { FC, ComponentType } from 'react';

interface Props {
    Providers: { component: ComponentType<any>; props?: any }[];
}

export const ComposeProviders: FC<Props> = ({ Providers, children }) =>
    Providers.reverse().reduce((acc, Provider) => {
        return (
            <Provider.component {...(Provider.props || {})}>
                {acc}
            </Provider.component>
        );
    }, <>{children}</>);