Как правильно обновить компонент в данном случае?

Всем привет!

Внедряю логики с запретом на ре-рендер компонента если нажали на кнопку. Сейчас код такой:

state = {
  updatesLocked : false
};

shouldComponentUpdate(nextProps, nextState) {
  return !nextState.updatesLocked
}

updatesButtonHandle = () => {
  this.setState({
    updatesLocked : !this.state.updatesLocked
  });
}

render () {
  const { updatesLocked } = this.state;
  return (
    <div className={styles.updatesButton} onClick={this.updatesButtonHandle} role="presentation">
      {updatesLocked ? (
        <div className={styles.lockIcon}>
          <LockClosedIcon />
        </div>
      ) : (
        <div className={styles.lockIcon}>
          <LockOpenIcon />
        </div>
      )}
    </div>
  )
}

Как видно из кода, при клике на кнопку я меняю стейт и на основе стейта запрещаю/разрешаю обновление компонента, но есть проблема с изменением иконки в кнопке. Она не обновляется при клике на неё (так как срабатывает shouldComponentUpdate).
Как тут можно обновить иконку при нажатии на кнопку?
Спасибо