初学者なので表現ができてるか不安なのですが、

countUp(counter) {
    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(counter.id);
        counters[pos].count++;
        return {
            counters: counters
        };
    });
}

以上のコード内のsetStateメソッドの引数のアロー関数において「 const counters = prevState.counters.map(counter =>以下省略」というように、
ローカル定数countersを定義して prevState.counterをコピーする理由がわかりません。

例えば以下のコードのように、

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

ローカル定数countersを定義をせず、かわりに直接prevState.countersを使用をした場合でもアプリケーションは問題なく動作しました。

ローカル定数countersを定義して prevState.counterをコピーする、
しないとでは差があるのでしょうか？