Реквизит пустой в root компоненте

Question

В приложении React мне нужно передать свои реквизиты моим компонентам маршрута, но по какой-то причине они приходят пустыми. Поэтому в VendingMachine, когда я пытаюсь получить доступ к своим реквизитам, в них ничего нет. Пустые массивы и объекты. Я установил фиктивную базу данных для работы с некоторыми данными.

index. js

import React from 'react';
import { render } from 'react-dom';
import './index.css';
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import configureStore from './redux/store/configureStore';

const store = configureStore();

render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root'),
);

Приложение. js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import './App.css';
import VendingMachine from './components/machine/VendingMachine';
import AboutPage from './components/about/AboutPage';

function App() {
  return (
    <div className="container-fluid">
      <Switch>
        <Route exact path="/" component={AboutPage} />
        <Route path="/machine" component={VendingMachine} />
      </Switch>
    </div>
  );
}

export default App;

VendingMachine. js, где после проверки моего console.log в начале все реквизиты пусты

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import './VendingMachine.css';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import VendingItems from './VendingItemsContainer';
import VendingInput from './VendingInputContainer';
import * as itemsActions from '../../redux/actions/itemsActions';
import { get } from '../../http/http';
import { handleResponse } from '../../api/apiUtils';

const baseUrl = 'http://localhost:3001/machine';

function VendingMachine(props) {
  console.log('ITEMS IN VM', props);
  const {
    items,
    actions,
    loadItems,
    updateItem,
  } = props;

  useEffect(() => {
    get(baseUrl).then((data) => {
      if (items.length === 0) {
        actions.loadItems().catch((error) => {
          alert(`Loading courses failed${error}`);
        });
      }

    });

  }, [actions, items.length, loadItems, props]);

  return (
    <div className="container">
      <div className="row">
        <div className="column">
          <VendingItems items={items} loadItems={loadItems} />
        </div>
        <div className="column">
          <VendingInput
            items={items}
            updateItem={updateItem}
          />
        </div>
      </div>
    </div>
  );
}

VendingMachine.propTypes = {
  items: PropTypes.array.isRequired,
  loadItems: PropTypes.func.isRequired,
  updateItem: PropTypes.func.isRequired,
};

function mapStateToProps(state, ownProps) {
  return {
    items: state.items
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      loadItems: bindActionCreators(itemsActions.loadItems, dispatch)
    },
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(VendingMachine);

А что касается моего apiServer. js

const express = require('express');

const low = require('lowdb');
const FileSync = require('lowdb/adapters/FileSync');

const adapter = new FileSync('src/tools/db.json');
const db = low(adapter);

const cors = require('cors');

const itemRouter = express.Router();
const app = express();

const port = process.env.PORT || 3001;

app.use(cors());

itemRouter.route('/machine')
  .get((req,res) => {
    const response = db.getState();
    // const response = db.getState().items;
    // const response = { hello: 'hello all' };
    res.json(response);
  });
itemRouter.route('/machine/:id')
  .get((req,res) => {
    const response = db.getState();
    res.json(response);
  });
app.use(itemRouter);

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.get('/machine', (req, res) => {
  const dbState = db.getState();
  res.send(dbState);
});

app.listen(port, () => {
  console.log(`JSON Server is running on port ${port}`);
});

Что это я отсутствует или делает неправильно?