React-Redux: Could not find "store" in the context of "Connect(UploadInternal)"

Duplicated Code Sandbox https://ndg6d.csb.app/

Full Error Uncaught Error: Could not find "store" in the context of "Connect(UploadInternal)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(UploadInternal) in connect opt.

Situation Everything was working correctly, then updated react 15.x to 16.13.x, and react-redux from 5.x to 7.2.x, and now the error above occurs on a component several levels deep.

I've checked the ReactRedux Docs and verified I've followed their recommended steps. And I've read all the other similar cases listed here on StackOverflow, but have not resolved the issue. Specifically, a store is passed to a provider that wraps the root app <Provider store={store}><App/></Provider>, and the intermediary components are connected with connect via ReactRedux, so I'm not sure why one of the nested children doesn't have access to the store.

index.js

   const store = configureStore(preloadedState);

    ReactDOM.render((
        <Provider store={store}>
          <MuiThemeProvider muiTheme={getMuiTheme()}>
            <ConnectedRouter history={history}>
              <Route component={App} />
            </ConnectedRouter>
          </MuiThemeProvider>
        </Provider>
      ), document.getElementById('root')
    );

configureStore.js

import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
import rootReducer from '../components/app/reducers';
import thunk from 'redux-thunk';
import { connectRouter, routerMiddleware } from 'connected-react-router'
import createHistory from 'history/createBrowserHistory'
import history from '../history/history'

export default function configureStore(initialState) {

  var middleware;
  var storeEnhancer;
  var store;

  if(initialState){
    middleware = [thunk, routerMiddleware(history)];

    storeEnhancer = compose(
      applyMiddleware(...middleware)
    );

    store =   createStore(
      combineReducers({
        root: rootReducer,
        router: connectRouter(history) 
      }),
      initialState,
      applyMiddleware(...middleware)););
  }else{
    middleware = [thunk];
    storeEnhancer = compose(
      applyMiddleware(...middleware)
    );

    store = createStore(
      combineReducers({
        root: rootReducer,
        router: connectRouter(history) 
      }),
      applyMiddleware(...middleware)););
  }


    if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers', () => {
            const nextRootReducer = require('../reducers');
            store.replaceReducer(nextRootReducer);
        });
    }

    return store;
}

Child.jsx & NestedChild.jsx (Inside Child.jsx) -- Just the bottom of the files to show the Components are connected:

const mapStateToProps = (state, ownProps) => {

  const {root, ...rest} = state;
  const reduxState = {...root};

  return {
    reduxState
  };
};


const mapDispatchToProps = (dispatch)=>{
  return {dispatch};
};

const mergeProps = (stateProps, dispatchProps, ownProps) => {
  return Object.assign({}, ownProps, stateProps, dispatchProps);
};

const options = {

};


Child_or_NestedChild = connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(Child_or_NestedChild);

export default muiThemeable()(Child_or_NestedChild);