title: React, store boolean value using custom hook , but it doesnt work
body: <p>I using React 18 and testing with sandbox env(codepen.io).
  I practice using LocalStorage and Custom Hooks, but it doesnt work as intended.. :(<br />
  Here is url:<a href="https://codepen.io/DogeIsFree/pen/qBYmpKj?editors=1111" rel="nofollow noreferrer">https://codepen.io/DogeIsFree/pen/qBYmpKj?editors=1111</a></p>
  <p>and Code!</p>
  <pre><code>&lt;body&gt;
    &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;script type=&quot;text/babel&quot;&gt;
      const useLocalStorage = (props) =&gt;
      {
        const [state,setState] = React.useState(()=&gt;{
          return window.localStorage.getItem(props) ||false}
        );
        React.useEffect(()=&gt;{
         window.localStorage.setItem(props,state)
        },[state]);
        return [state,setState];
      }
      const App = () =&gt;{
        const [count,setCount] = React.useState(0);
        const [isLiked,setIsLiked] = useLocalStorage(&quot;isLiked&quot;);
        
        const handleLike = (event) =&gt;{
          console.log(isLiked) // isLiked false!
          isLiked ?
            console.log(&quot;true!&quot;) // but, this is result 
          : console.log(&quot;false!&quot;); //i expected 
          setIsLiked(!isLiked);
        }
        return(
          &lt;&gt;
            &lt;span&gt;{count}&lt;/span&gt;
            &lt;button onClick={handleLike}&gt;Like&lt;/button&gt;
          &lt;/&gt;
        )
      }
      ReactDOM.createRoot(root).render(&lt;App/&gt;);
    &lt;/script&gt;
    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>In first click, state(&quot;Isliked&quot;) logged false, but in IF condition( isLiked ?  console.log(true!):console.log(false!) ), logged true! .</p>