Too gist is too resolve problem of chaining of many context providers

  <AuthProvider>
    <ThemeProvider>
        <LionessProvider>
            <ErrorProvider>
              <LoadingProvider>
                <Component />
              </LoadingProvider>
            </ErrorProvider>
        </LionessProvider>
    </ThemeProvider>
  </AuthProvider>

Solution

  <ComposeProviders
    with=[
       { component: AuthProvider },
       {  
         component: ThemeProvider,
         props: { 
           theme: { main: 'palevioletred' }
         }
       },
       { component: LionessProvider },
       { component: ErrorProvider },
       { component: LoadingProvider }
    ]
  >
    <Component />
  </ComposeProviders>