React Component cant acces Redux store

I have the following modules for my React app:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MainApp from './MainApp';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <MainApp />
  </React.StrictMode>,
  document.getElementById('root')
);

MainApp.js

import React from 'react';

import App from './containers/app';
import './App.css';

import {ConnectedRouter} from 'connected-react-router'
import {Provider} from 'react-redux';
import {Route, Switch} from 'react-router-dom';

import configureStore, {history} from './store';

export const store = configureStore();

const MainApp = () =>
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route path="/" component={App}/>
      </Switch>
    </ConnectedRouter>
  </Provider>;

export default App;

store/index.js

import {applyMiddleware, compose, createStore} from 'redux';
import reducers from '../reducers/index';
import {createBrowserHistory} from 'history'
import {routerMiddleware} from 'connected-react-router';
import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas/index';


const history = createBrowserHistory();
const routeMiddleware = routerMiddleware(history);
const sagaMiddleware = createSagaMiddleware();

const middlewares = [sagaMiddleware, routeMiddleware];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;


export default function configureStore(initialState) {
  const store = createStore(reducers(history), initialState,
    composeEnhancers(applyMiddleware(...middlewares)));

  sagaMiddleware.run(rootSaga);

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

containers/dataviewer/index.js

import React from 'react';
import {connect} from 'react-redux';

import {
  connectPath
} from '../../actions/Paths';

import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';

import TabularViewer from './TabularViewer';
import CollapsableViewer from './CollapsableViewer';
import ChartViewer from './ChartViewer';

class DataViewer extends React.Component {
  constructor() {
    super();
    this.state = {
      displayStyle: null
    }

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = (style) => {
    this.setState({displayStyle: style})
  }

  DisplayControllers = () => {
    return (
      <ButtonGroup variant="text" color="primary" aria-label="outlined primary button group">
        <Button color={this.state.displayStyle === 'tabular'? 'secondary': 'primary'} onClick={() => this.handleClick('tabular')}>Tabular</Button>
        <Button color={this.state.displayStyle === 'collapsable'? 'secondary': 'primary'}onClick={() => this.handleClick('collapsable')}>Colapsable</Button>
        <Button color={this.state.displayStyle === 'chart'? 'secondary': 'primary'} onClick={() => this.handleClick('chart')}>Gráfico</Button>
      </ButtonGroup>
    )
  }

  DisplayComponent = () => {
    switch (this.state.displayStyle) {
      case 'tabular':
        return <TabularViewer />
      case 'collapsable':
        return <CollapsableViewer />
      case 'chart':
        return <ChartViewer />
      default:
        return <p>Seleccione un estilo de desplegado.</p>;
    }
  }

  render() {
    return (
      <div>
        <p>Data Viewer</p>
        <this.DisplayControllers />
        <this.DisplayComponent />
      </div>
    )
  }
}

const mapStateToProps = ({paths}) => {
  const {connection, path, data} = paths;

  return {
    connection,
    path,
    data
  }
}

export default connect(mapStateToProps, {connectPath})(DataViewer)

Te problem is that I get the following error when the component is mounted:

Error: Could not find "store" in the context of "Connect(DataViewer)". 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(DataViewer) in connect options.

I can't see what I am missing.

EDIT containers/app.js

import React from 'react';
import DataViewer from './DataViewer';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <DataViewer 
            database_host="127.0.0.1'"
            database_port="5432"
            database_name="TCDigital"
            database_user="postgres"
            database_password="xxxx"
            path="Ventas"
            displayStyle="collapsable"
          />
        </header>
      </div>
    );
  }
}

export default App;