CounterList関数の中でやっていることがよくわかりません。

function CounterList(props) の引数には

{id: "A", count: "0", color: "tomato"},
{id: "B", count: "0", color: "skyblue"},
{id: "C", count: "0", color: "limegreen"},

が入っているということでしょうか？

なぜmapで配列にする必要があるのでしょうか？

return(
          <Counter
            counter = {counter}
            key = {counter.id}
            />
        )

ここではなにを返しているのでしょうか？(returnの中に書いてある内容が理解できない)

など、全体的にこのレッスンのやっていることがよくわかりません。
もう少し噛み砕いて教えていただけないでしょうか？