title: React useState, useEffect not working as expected
body: <p>I have a use case that I'd like to solve it with React hooks, but it's not working as I expected.</p>
  
  <ul>
  <li>Expectation: Not on top will be shown on scrolling down and will disappear when scrolling back on top of the document.</li>
  <li>Current: Not on top shown on scrolling down but not disappear when scrolling back on top of the document.
  Code sandbox link: <a href="https://codesandbox.io/s/wkroy1r2xl" rel="nofollow noreferrer">https://codesandbox.io/s/wkroy1r2xl</a></li>
  </ul>
  
  <p>Thanks in advance.</p>