Javascript React状态变量在使用++前置更新时引发错误

我对React和JS还很陌生，只是探索语言的本质.

我试图比较使用++操作符(并通过counter + 1的惯用方式)更新状态变量"counter"的差异.

我在以下片段中得到的错误是:

function App() {
  const [counter, setCounter] = useState(0);

  const incrementCounter = () => {
    setCounter(++counter);
  };

  console.log(counter);

return (
    <>
  <button onClick={incrementCounter}>Increase </button>
    </>

App.jsx?t=1714542208954:31 Uncaught TypeError: Assignment to constant variable.
    at incrementCounter (App.jsx?t=1714542208954:31:18)
    at HTMLUnknownElement.callCallback2 (react-dom_client.js?v=38cf15c3:3672:22)
    at Object.invokeGuardedCallbackDev (react-dom_client.js?v=38cf15c3:3697:24)
    at invokeGuardedCallback (react-dom_client.js?v=38cf15c3:3731:39)
    at invokeGuardedCallbackAndCatchFirstError (react-dom_client.js?v=38cf15c3:3734:33)
    at executeDispatch (react-dom_client.js?v=38cf15c3:7014:11)
    at processDispatchQueueItemsInOrder (react-dom_client.js?v=38cf15c3:7034:15)
    at processDispatchQueue (react-dom_client.js?v=38cf15c3:7043:13)
    at dispatchEventsForPlugins (react-dom_client.js?v=38cf15c3:7051:11)
    at react-dom_client.js?v=38cf15c3:7175:20

注 : I get the error after I click on Increase button

当我try 使用counter + 1调用setState函数(setCounter)时，错误就会消失，我无法理解原因.

我知道前/后修复操作符不适合更新react 状态，我想知道为什么是这种情况.

任何见解都将不胜感激.