以下のuseReducerのreducer関数で重要な原則は何ですか？

前の問題

以下のコンポーネントで、ボタンをクリックしたときに期待通りに動作しないのはなぜですか？ ```jsx function ToggleButton() { const [isOn, setIsOn] = useState(false); const handleToggle = () => { isOn = !isOn; // この行に問題がある }; return ( <button onClick={handleToggle}> {isOn ? 'ON' : 'OFF'} </button> ); } ```