はじめまして。
１レッスンずつじっくりと学ばせていただいています。

質問ですが、カウントアップ関数を呼び出す箇所で、

onClick = { () => props.countUp(props.counter) }

ではなく、

onClick = { () => props.countUp(props.counter.id) }

のように実際に関数で使用するクリックした要素のidのみを渡す方が
無駄がなく分かりやすいように思うのですが、
そのようにしない理由があるのでしょうか？

countUp関数では引数としてidをclickedId（名称は何でも良いですが）
などとして受け取り、indexOf関数でそのまま使用する格好になるかと思います。

countUp(clickedId) {
  this.setState(prevState => {
  const counters = prevState.counters.map(counter => {
     return { id: counter.id, count: counter.count, color: counter.color };
   });
   const pos = counters.map(counter => {
     return counter.id;
    }).indexOf(clickedId);
    counters[pos].count++;
    return {
       counters: counters
    };
  });