Почему не изменяется значение state-объекта?

Есть state:

state = {
    productToCart: {
      size: '',
      color: ''
    }
  }

Перед тем как отправить товар в корзину, пользователь должен выбрать размер и цвет, который идут в state.
Так выглядит код для выбора размера и цвета:

{itemSizes.map((size, index) => {
     return (
       <li key={index} className={"filter-item " + (this.state.productToCart.size === size ? "filter-active" : null)} onClick={() => 
       {this.pickSize(size)}}> {size} </li>
    )
   }
 )}
...
{itemColors.map((color, index) => {
     return (
       <li key={index} className={"filter-item " + (this.state.productToCart.color === color ? "filter-active" : null)} onClick={() => 
       {this.pickColor(color)}}> {color} </li>
    )
   }
 )}

Вот функции, которые задают значение состояния:

pickSize = (size) => {
    this.setState({
      productToCart: {
        size: size
      }
    })
   }
...
pickColor = (color) => {
    this.setState({
      productToCart: {
        color: color
      }
    })
   }

В результате обновляется состояние только или цвета, или размера. Если выводить результат в консоль - отображается только последний измененный state, но не оба одновременно, потому как предыдущее значение заменяется новым. Клацнул на размер - показывает только размер, на цвет - отображается только выбранный цвет. Почему не отображается и первое, и второе одновременно, ведь функции изменяют, по сути, разные значения и никак между собой не взаимодействуют?