react-redux-form nested reducer issue

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import store from './store.js';
import UserForm from './UserForm.js';

class App extends React.Component {
  render() {
    return (
      <Provider store={ store }>
        <UserForm />
      </Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

store.js

import { createStore, combineReducers  } from 'redux';
import { combineForms } from 'react-redux-form';


const initialUserState = {
  firstName: '',
  lastName: ''
};

const reducer = combineReducers({
  forms: combineForms({
    user: initialUserState,
  })
})

const store = createStore(reducer);

export default store;

UserForm.jsx

import React from 'react';
import { Control, Form } from 'react-redux-form';

class UserForm extends React.Component {
  render() {
    return (
      <Form model="forms.user"
        onSubmit={(user) =>
          console.log('-->', user)
        }>
        <label>First name:</label>
        <Control.text model=".firstName" />

        <label>Last name:</label>
        <Control.text model=".lastName" />
      </Form>
    );
  }
}

export default UserForm;