Medium. How to combine providers in React

AllProviders.tsx

type Providers = [ComponentType<any>, ComponentProps<any>?][];

const combineProviders = (providers: Providers): FC => providers.reduce(
  (AccumulatedProviders, [Provider, props = {}]) => ({ children }) => (
    <AccumulatedProviders>
      <Provider {...props}>
        <>{children}</>
      </Provider>
    </AccumulatedProviders>
  ),
  ({ children }) => <>{children}</>
);

export const AllProviders = CombineProviders([
  [MuiThemeProvider, { theme }],
  [MuiPickersUtilsProvider, { utils: DateFnsUtils }],
  [StylesProvider, { injectFirst: true }],
  [Provider, { store: configureStore() }],
  [Provider1],
  [Provider2],
  [MyComponent, {name: 'John']
]);

index.tsx

import ReactDOM from 'react-dom';
import { StrictMode } from 'react';
import { AllProviders } from './AllProviders';

ReactDOM.render(
  <StrictMode>
    <AllProviders>
      <App />
    </AllProviders>
  </StrictMode>,
  document.getElementById('root')
);