React update state of multiple check boxes within a dialog box at the time of dialog box creation

i am trying to create a state full dialog box which has multiple check boxes. what i am doing is when user close the dialog box i save the state of dialog box into the local storage and when user open it again i get the item from local storage but unable to update the state properly. Thanks in Advance!!!

    import React, { Component } from 'react';

class FilterPanel extends Component {
  constructor(props) {
    super(props);
            this.state = {
                active: [],
                filters: []
            };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmission = this.handleSubmission.bind(this);
  }

  //////////////////////////////////////retrieving from local storage
  componentDidMount(){

    this.setState(JSON.parse(localStorage.getItem('checks')));
    }
    //////////////////////////////////////////////saving state in local storage
    componentWillUnmount(){
      localStorage.setItem('checks',JSON.stringify(this.state));
    }
  handleChange(event) {
      this.setState({ [event.target.id]: (this.state[event.target.id] === null || this.state[event.target.id] === undefined) ? true : !this.state[event.target.id] });
      this.setState({ active: {[event.target.id]: (this.state.active[event.target.id] === null || this.state.active[event.target.id] === undefined) ? true : !this.state.active[event.target.id] }});
      if (this.state.filters.includes(event.target.id)){
          var toremove = this.state.filters.indexOf(event.target.id);
          this.state.filters.splice(toremove, 1);
          console.log("this is the state in handle1");
          console.log(this.state);
      }
      else
        {
          this.state.filters.push(event.target.id);
            console.log("this is the state in handle2");
            console.log(this.state);
      }

      console.log("this is the event.target.id");
      console.log([event]);
  }
  handleSubmission(event) {
    this.props.handleFilters({[this.props.id]: Object.keys(this.state.active)})
    this.props.handler(false);
    event.preventDefault();
  }

  render() {
    const header = <div className='modal-header'><h5 className='modal-title'>{this.props.title}</h5><button type='button' className='close' aria-label='Close' onClick={() => this.props.handler(false)}><span aria-hidden='true'>&times;</span></button></div>;
    const options = this.props.options.map(option => {
      return (
        <div className='form-check'>
          <label className='form-check-label'>
            <input className='form-check-input' type='checkbox' id={option} value={option} onChange={this.handleChange}/> {option}
            <span className='form-check-sign'>
              <span className='check'></span>
            </span>
          </label>
        </div>
      )
    });

    return (
      <form onSubmit={this.handleSubmission}>
        <div className='modal fade show' style= tabIndex='-1' role='dialog' aria-labelledby='ModalLabel' aria-hidden='true'>
          <div className='modal-dialog' role='document'>
            <div className='modal-content'>
              {header}
              <div className='modal-body'>
                <div className='backtittle'>
                  <h6 style=>{this.props.description}</h6></div>
                    {options}
                  </div>
              <div className='modal-footer justify-content-center'>
                <input className='btn btn-primary-filters btn-sm' type='submit' value='Filtrar'  />
                <button type='button' className='btn btn-primary-filters btn-sm'  onClick={() => this.restoreFilters()}>Eliminar TODOS los filtros</button>
              </div>
            </div>
          </div>
        </div>
      </form>
    );

  }

}
export default FilterPanel;