Combine Context Providers in React

I'm building an application with Typescript in React. I've got multiple Context providers. return function in App.tsx looks like this:

    return (
        <>
            <AuthenticationProvider>
                <SubscriptionsProvider>
                    <ResourceProvider>
                        <ResourceAggregatesProvider>
                            <ThemeProvider theme={ti8m_theme}>
                                <Router>
                                    <main>
                                        <Routes>
                                            ...
                                        </Routes>
                                    </main>
                                </Router>
                            </ThemeProvider>
                        </ResourceAggregatesProvider>
                    </ResourceProvider>
                </SubscriptionsProvider>
            </AuthenticationProvider>
        </>
    )

Now I want to reduce the Providers by outsourcing them to something like an AppContextProvider.tsx so that the return function in App.tsx reduces to something like:

    return (
        <>
            <AppContextProvider> # Contains AuthenticationProvider, SubscriptionsProvider, ResourceProvider and ResourceAggregatesProvider
                <ThemeProvider theme={ti8m_theme}>
                    <Router>
                        <main>
                            <Routes>
                                ...
                            </Routes>
                        </main>
                    </Router>
                </ThemeProvider>
            </AppContextProvider>
        </>
    )

I tried this tutorial but ended up with the following error:
TS2559: Type '{ children: any; }' has no properties in common with type 'IntrinsicAttributes'. within the CombineComponents.tsx

How is this normally managed in a real environment?