redux-form remove function doesn't work - redux

Question

I have a strange problem with my form. I can add and remove fields with two several buttons, but the remove button has stopped working. I can see that on clicking still the action "##redux-form/ARRAY_REMOVE" gets fired, but the field does not disappear. I don't really know why it stopped working, I tried to undo all the code I wrote afterwards, but wasn't able to track the error down. Would appreciate any input. Here is my code:
import React from 'react';
import TextField from 'material-ui/TextField';
import { Field, FieldArray, reduxForm} from 'redux-form';
import validate from './validate';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin(); //Needed, otherwise an error message is shown in the console
const renderTextField = ({input, label, meta: {touched, error}, ...custom}) => (
<TextField
hintText={label}
floatingLabelText={label}
errorText={touched && error}
{...input}
{...custom}
/>
);
const renderUsers = ({fields, meta: { touched, error }}) => (
<div>
<div>
<button className="btn btn-primary"
type="button" onClick={() => fields.push({})}>
<span className="glyphicon glyphicon-plus-sign"/> Add User
</button>
{touched && error && <span>{error}</span>}
</div>
{fields.map((index) =>
<div key={index}>
<Field name={`${index}.firstName`} component={renderTextField} label="First Name"/>
<Field name={`${index}.lastName`} component={renderTextField} label="Last Name"/>
<Field name={`${index}.position`} component={renderTextField} label="Position"/>
<Field name={`${index}.email`} component={renderTextField} label="Email"/>
<button className="btn btn-xs btn-danger"
type="button"
title="Remove User"
onClick={() => fields.remove(index)}>
<span className="glyphicon glyphicon-minus-sign"/>
</button>
</div>
)}
</div>
);
const UserCreation = (props) => {
const { handleSubmit, pristine, reset, submitting} = props;
return (
<form onSubmit={handleSubmit}>
<FieldArray name="users" component={renderUsers}/>
<div>
<button className="btn btn-primary btn-success"
type="submit"
disabled={pristine || submitting}>
<span className="glyphicon glyphicon-send" />
Submit
</button>
{' '}
<button type="button"
className="btn btn-primary btn-danger"
disabled={ pristine || submitting}
onClick={reset}>
Cancel
</button>
</div>
</form>
);
}
export default reduxForm({
form: 'UserCreationForm',
validate
})(UserCreation);
Here is a snapshot from my console when I try to remove the field:
console.log of action

Answer 1

I fixed it. I added a second key to the map function:
{fields.map((user, index) =>
<div key={index}>
<Field name={`${user}.firstName`} component={renderTextField} label="First Name"/>
<Field name={`${user}.lastName`} component={renderTextField} label="Last Name"/>
<Field name={`${user}.position`} component={renderTextField} label="Position"/>
<Field name={`${user}.email`} component={renderTextField} label="Email"/>