نمایش و پنهان شدن نوبار وقتی اسکرول میشه

تو کد زیر بعد از اینکه صفحه 250 پیکسل اسکرول میشه ، نَوبار پنهان میشه. حالا میخوام بدونم علاوه بر این قابلیت ، چطور کد زیر با استفاده از React Hooks میتونم تغییر بدم که وقتی هم صفحه اسکرول به سمت بالا بشه ، نوبار نمایش داده بشه؟

import React, {useState,useEffect} from 'react'
import './Navbar.css';
import {Link} from 'react-router-dom';
const Navbar = () => {
  const [show, setShow] = useState(false)
  const controlNavbar = () => {
  if (window.scrollY > 250 ) {
      setShow(true)
  }else{
    setShow(false)
  }
  }

  useEffect(() => {
  window.addEventListener('scroll', controlNavbar)
  return () => {
      window.removeEventListener('scroll', controlNavbar)
  }
  }, [])
return(

  <header className={`active ${show && 'hidden'}`}>
</header>
)}

این هم کد css:

.active{
height: 4rem;
width: 100%;
position: fixed;
top: 0px;
transition: 0.3s linear;
display: flex;
justify-content:stretch;
align-items: center;
background-color: #FFFFFF;
border-bottom: 1px solid rgba(0, 0, 0, .1);
z-index: 40;
box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .08);
/* padding: 0 7%; */
}
.hidden{
height: 4rem;
width: 100%;
z-index: 40;
border-bottom: 1px solid rgba(0, 0, 0, .1);
box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .08);
position: fixed;
top: -80px;
transition: 0.3s linear;
}