Передача массива props дочернему компоненту

Я пытаюсь передать массив объектов от родительского к дочернему компоненту в качестве опоры, а затем переместить его на карту и отобразить в дочернем компоненте. Когда я пытаюсь отобразить его, ничего не происходит, когда я его console.info, он показывает мой массив объектов. Какая разница, что тут ломается?

class ClothingBuyingOptions extends Component {

state = {
    size: '',
    color: '',
    showShoppingBag: false,
    items: []
  }

  addItemToBag = () => {
    const { size, color } = this.state;
    this.setState({
      showShoppingBag: true,
      items: [ ...this.state.items, [{ size: size, color: color }]]
    });
  }

  render() {
      return (
        <div>
          <button
            onClick = {this.addItemToBag}>
              Add to Bag
          </button>
          <ShoppingBag items = {this.state.items} />  
        </div>
      );
  }
}


class ShoppingBag extends Component {

  render() {
    const items = this.props.items.map((item, index) =>
      <div
        key = {index}>
        <p>{item.size}</p>
        <p>{item.color}</p>
      </div>
    )
    console.info(this.props.items)
    return (
      <div className = "container">
       {items}
      </div>
    );
  }
}