React渲染JSX组件列表时onClick事件与hover光标样式不生效问题求助

各位React大佬好，我最近碰到了一个奇怪的问题，折腾了好几个小时都没搞定，来求助大家！

事情是这样的：我需要渲染一组<span>组件，所以先在外部用循环push的方式生成了一个组件数组，代码如下：

// 定义在组件外部的数组
let components = [];
for(...) {
  components.push(<span className="c1 c2" onClick={() => console.log("test")}>...</span>);
}

然后我在函数组件里直接渲染这个数组：

const MyList = () => {
  return (
    <p>{components}</p>
  )
}

结果页面渲染后出现了两个问题：

1. onClick事件完全失效：点击这些span元素完全没反应，打开浏览器开发者工具看元素，发现class属性正常显示c1 c2，但看不到onclick事件绑定，而且对应的事件被标记为function noop() {}；
2. hover光标样式不生效：我给.c2类写了如下样式，文字变蓝色是正常的，但鼠标hover上去时，光标完全没有变成pointer的效果：

.c2{
  color: blue;
}
.c2:hover {
  cursor: pointer;
}

我已经检查过事件函数的写法（用了箭头函数，应该没问题吧？），也确认样式文件是正确引入的，但就是解决不了这两个问题。有没有大佬能帮我分析下可能的原因，或者给点调试方向呀？

万分感谢！

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