Как в ReactJS просуммировать все значения, которые указаны во всех рендерах одного и того же компонента на странице?

К сожалению, я пока еще не силен в ReactJS, но работу необходимо выполнить:

У меня есть корзина товаров, реализована в ReactJS. Это компонент Card, который рендерится несколько раз для разных товаров имеющих различную стоимость. В каждой карточке товара имеется возможность менять его количество с помощью тэга input, что динамически влияет на сумму.

Как я могу взять все суммы товаров, которые отображаются на моей странице и получить итоговую сумму заказа, которую я реализовал в другом компоненте (стоит условие, что любая карточка любого товара может быть удалена из корзины)?

Мой компонет Card выглядит следующим образом:

class Card extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 1,
    }
    this.less = this.less.bind(this);
    this.more = this.more.bind(this);
    this.sum = this.sum.bind(this);
  }

  less() {
    this.setState(({ count }) => ({ count: count > 1 ? count - 1 : count }));
  }

  more() {
    this.setState(({ count }) => ({ count: count + 1 }));
  }

  sum() {
    return this.props.price * this.state.count
  }

  render() {
    return (
      <div>
        <div className="count">
          <p className="count-title">Количество</p>
          <button onClick={this.less}>-</button>
          <input className="count-input" value={this.state.count} />
          <button onClick={this.more}>+</button>
        </div>
        <div className="price">
          <span className="price__cost">{this.sum()}</span><span className="currency">грн.</span>
        </div>
      </div>
    )
  }
}

Общая сумма должна браться со всех существующих на странице тэгов span "price__cost", суммироваться и выводиться в компоненте Total в тэге span "total__cost" (где вопросительные знаки):

class Total extends React.Component {
  render() {
    return (
      <div>
        <div className="total">
          <h3 className="total__text">Общая сумма:</h3>
          <span className="total__cost">{ ????? }</span><span className="total__currency"> грн.</span>
          <button className="total__btn-checkout">Оформить</button>
        </div>
      </div>
    )
  }
}

Вызываю рендер я следующим образом:

ReactDOM.render(
  <React.StrictMode>
    <App />
    <Card price="20999" />
    <Card price="6899" />
    <Card price="5039" />
    <Total />
  </React.StrictMode>,
  document.getElementById('root')
);

Помогите, пожалуйста! Буду очень благодарен любой помощи или совету!