Реагирует на событие дочернего компонента onChange дважды

Question

Я работаю над компонентом выбора значков.

В дочернем компоненте обработайте this.props.onChange следующим образом:

handleClick( val ){
        this.setState({ value: val });
        this.props.onChange( val );
}



render(){
      return(
        <div 
            key={ index } 
            className={
                classnames(
                    'icon-item-box',
                    {'active-icon': name == this.state.value}
                )
            }
            onClick={ () => this.handleClick( name ) }>
                <div><i className={ name }></i></div>
                <span>{ name }</span>
        </div>
      );
}

И в родительском я использую этот компонент, как это:

<TheIconPicker 
        value={ icon }
        onChange={
                (val) => {
                        setAttributes( { icon: val } )
                        console.log( icon );
                }
        }
/>

Когда я выбираю значок, т.е. нажимаю на значок, значение icon печатается дважды в консоли, если щелкнуть в первый раз, в противном случае, когда вы нажимаете на другой значок, сначала печатается старое значение. а затем текущий.

Есть идеи, почему это может происходить?