PreSelected React CheckBox List Issue

I am able to show checkboxlist and able to select the values and save to database.

now I want to edit that record. for that I have to show the list. data is coming from actions creator to props. and I am rendering that using redux form initalValues. now when I am changing the selection. it is not happening. because of the onChange function calls and rerender happens.

my issue is what I understand is my data should be in state not props so that if I change the selection. it can be reflected through on change and rerender.

Below giving example is working fine because I hardcoded the checkboxlist. but problem is it is coming from database for current event. now user want to edit and make changes with the preselected checkboxes.

Can anyone help me in this regards. Here is the Code:

class EventsShow extends Component {
 static contextTypes = {
        router: PropTypes.object
    };

    constructor(props) {
        super(props);
        const data = [                                
                { id: 3, DepartmentName: a', selected: true },
                { id: 4, DepartmentName: 'b', selected: true },
                { id: 5, DepartmentName: 'c', selected: true }
        ];

        this.onInputChange = this.onInputChange.bind(this);
        this.state = { optionsData: data };
    }

    componentWillMount() {
        this.props.fetchEvent(this.props.params.id);
    }

    onSubmit(props) {      
        this.props.createEvent(props)
            .then(() => {                
                this.context.router.push('/');
            });   
    }

    renderField = ({ input, label, type, meta: { touched, error } }) => (
                    <div className="row">
                        <div className="col-md-2"></div>
                        <div className="col-md-2">
                            <label>{label}</label>
                        </div>
                        <div className="col-md-5">
                            <input {...input} placeholder={label} type={type} className="form-control" />
                        </div>
                        <div className="col-md-3 text-help">
                            {touched && error && <span>{error}</span>}
                        </div>
                    </div>
                    )

    onInputChange(id, e) {        
        console.log(e);   
                const a = this.state.optionsData.map((i) => {            
            return {
                id: i.id,
                selected: (i.id === id ? !i.selected : i.selected),
                DepartmentName: i.DepartmentName
            };                
        });

        this.setState({ optionsData: a });        

    }

    renderCheckboxList(event) {              

       return this.state.optionsData.map((item, index) => {
                                    return (                                        
                                        <div key={'chk-' + index} className="checkbox">
                                            <label>
                                                <input                                                     
                                                    type="checkbox"
                                                    name={item.id}
                                                    value={item.id}
                                                    onChange={this.onInputChange.bind(this, item.id)}
                                                    checked={item.selected}
                                                /> 
                                                {item.DepartmentName}
                                            </label>
                                        </div>
                                    );
                                });

    }


    render() {
        const { event, handleSubmit } = this.props;


        if (!event) {
            return <div>Loading...</div>;
        }        

        return (
            <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>

                <div className="list-group-item">
                    <div className="panel panel-success">
                        <div className="panel-heading">
                            <strong>View/Edit A Existing Event</strong>
                        </div>
                    </div>
                    <Field name="Title" type="text" component={this.renderField} label="Title" />
                    <Field name="SubmittingDepartment" type="text" component={this.renderField} label="Submitting Department" />
                    <Field name="Location" type="text" component={this.renderField} label="Location" />
                    <Field name="StartDateTime" type="datetime-local" component={this.renderField} label="Start Date and Time" />
                    <Field name="EndDateTime" type="datetime-local" component={this.renderField} label="End Date and Time" />
                    <Field name="Description" type="textarea" component={this.renderField} label="Description" />

                    <div className="row">
                        <div className="col-md-2"></div>
                        <div className="col-md-2">
                            <label>Participating Departments</label>
                        </div>                        
                        <div className="col-md-5">
                        {this.renderCheckboxList(event)}
                        </div>
                        <div className="col-md-3 text-help">

                        </div>
                    </div>

                    <div className="row">&nbsp;</div>
                    <div className="row">
                        <div className="col-md-4 text-right"></div>
                        <div className="col-md-5">
                            <button type="submit" className="btn btn-primary">Update</button>&nbsp;
                            <button type="submit" className="btn btn-primary">Cancel</button>&nbsp;
                            <Link to="/" className="btn btn-danger">Back to List</Link>
                        </div>
                    </div>
                </div>

            </form>
        );
    }
}

const EventsShowForm = reduxForm({
    form: 'EventsShowForm', 
    enableReinitialize: true,    
    validate
})(EventsShow);

function mapStateToProps(state) {    
    return { 
        event: state.events.event,
        initialValues: state.events.event        
    };
}

export default connect(mapStateToProps, { fetchEvent, updateEvent })(EventsShowForm);