使用单击处理程序填充数组

我在用数组中的选项填充状态时遇到问题

因此，我有一个选项数组，所有选项都会生成一个按钮——当单击时，它有一个clickHandler，应该用单击的每个选项填充状态值。

问题是，它有效，但跳过了第一次点击，这意味着我必须点击6次才能注册5个选项

const options = [
"tech", "culture",
"sex", "sports",
"opinion", "business",
"food", "health",
"space"
];
const clickHandler = (option, e , index) => {
if(userOptions.length < 5) {
setUserOptions(prevState => prevState.concat(option));
console.log(userOptions);
}
}
const buttonList = options.map((element,index) => {
return (
<button 
key={element} 
disabled={userOptions.includes(element)}
className={`btn-main ${element}`}
onClick={(e) => {
// returns two handleClick methods
clickHandler(element)
colorChange(e.target)
}}
>
{element} 
</button>
)
})

使用array.concat跳过第一次单击条目。。。我有办法解决这个问题吗？