在使用钩子的反应中没有得到更新的状态值？

我正在使用functional components。我有2单选按钮和一个按钮。在submit提交按钮上我无法获得updated value。

这是我的代码https://codesandbox.io/s/peaceful-microservice-ywdoe?file=/src/App.js

重现步骤

1. 运行该应用程序。默认的单选按钮值为 no
2. 将单选按钮中的任何一个更改为。yes然后单击Submit按钮。它将显示状态的更新值。但是它显示了初始状态，为什么？

按钮提交处理程序

 const buttonHandler = useCallback(async e => {
    e.preventDefault();
    console.log(state);
  }, []);

如果change blank array to one item in array state like this.it可以正常工作，但是当我更改.it时，它将重新呈现按钮组件state。任何更好的解决方案？？？防止重新渲染并获取更新状态？

 const buttonHandler = useCallback(async e => {
    e.preventDefault();
    console.log(state);
  }, [state]);