Cannot read property from reducer in redux store

Question

I'm trying to use redux in a react application. I've set up redux and configured store and provided the store to Provider that wraps the whole application. I cannot access any property from the store.

My Index.js is as below

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

import { Provider } from 'react-redux';

import store from './redux/store';

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

reportWebVitals();

store.js

import { createStore } from 'redux';

import mainReducer from './Reducer';

const store = createStore(mainReducer);

export default store;

Reducer

import { Types } from './Types';

const INITIAL_STATE = {
  formData: {
    projectName: '',
    projectDescription: '',
    client: '',
    contractor: '',
    min_x: undefined,
    max_x: undefined,
    min_y: undefined,
    max_y: undefined,
    min_z: undefined,
    max_z: undefined,
  },
  step: 1,
  hasResult: false,
};

const mainReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case Types.SET_STEP:
      return {
        ...state,
        step: action.payload,
      };
    default:
      return state;
  }
};

export default mainReducer;

When I try to access any property from reducer using mapStateToProps like below

const mapStateToProps = (state) => ({
  step: state.mainReducer.step,
});

I get an error saying

TypeError: Cannot read property 'step' of undefined

What am I doing wrong here?