React中使用Array.map()渲染数组元素至无序列表时的问题排查求助

各位大佬好，我最近在学React，写了个小测试程序练手，结果遇到了个头疼的问题，想请大家帮忙看看。

先贴一下我的代码：

let count = 0;

function GenerateValue(tasks) {
  count += 1;
  let someValue = Math.random() * 10;
  tasks.push({ key: count, value: someValue });
  console.log(tasks);
}

function RenderTasks() {
  const tasks = [];

  return (
    <>
      <button onClick={() => GenerateValue(tasks)}>Add New Item</button>
      <h1>List</h1>
      <ul>
        {<li key={count}>{tasks.map((msg) => msg.value)}</li>}
        {/*tasks.map((msg) => <li key = {count}>{msg.value}</li>)*/}
      </ul>
    </>
  );
}

export default RenderTasks;

这个程序的逻辑很简单：点击按钮生成一个随机数，把它加到tasks数组里，然后想把数组里的所有元素以列表项的形式渲染到页面上。现在控制台里能清楚看到tasks数组确实在不断新增元素，但页面上的列表就是没反应，啥都显示不出来。

我自己试过两种写法都没成功：

• 现在代码里的写法：把map的结果放进一个单独的li标签里
• 注释掉的那行代码：这行是参考教程里的写法写的，教程里类似的map调用逻辑是正常工作的，但换到我的代码里就失效了

我已经反复检查好几遍了，感觉应该是个很简单的小错误，但就是找不到，麻烦各位帮我看看问题出在哪了？

备注：内容来源于stack exchange，提问作者Jayant Verma