ReactのuseStateで管理されている配列内のオブジェクトを更新する 🍛

文章での表現がすごく難しいのですが、

const [list, setList] = useState([{
  color: 'red',
  text: 'Ya-Ha-!'
},{
  color: 'blue',
  text: 'Yo-Ho-!'
},{
  color: 'yellow',
  text: 'Ya-Ha-!'
},{
  color: 'green',
  text: 'Yo-Ho-!'
}]);

と、いう感じでuseStateで管理されている配列にオブジェクトを収納し、

list[0].text = 'Yo-Ho-!';

と、オブジェクトのプロパティを更新しても、

<ul>
  { list.map((item, i) => <li key={ i }>{ item.text }</li> }
</ul>

とかで作られたDOMのテキストは更新されません。stateの値の変化が検知できないからです。
先頭のオブジェクトのtextプロパティを 'Yo-Ho-!' に変更したいのであれば、

const tmp = [];

list.forEach((item, i) => {
  if (i === 0) {
    tmp.push({ ...item, text: 'Yo-Ho-!' });
  } else {
    tmp.push(item);
  }
});

setList(tmp);