"Navbar Links Not Hiding on Scroll Down"

Question

I'm trying to create a React navbar that hides after a certain scroll threshold using Tailwind CSS and react-scroll. The goal is to only display the hamburger icon when the user scrolls down past a specific point. However, I'm facing an issue where the navbar remains visible while scrolling down, and the hamburger icon doesn't appear.!

Or some cases both appear on the screen and some how I am not able to hide and can someone please help me. Thanking you in advance.

import React, { useEffect, useState } from 'react';
import { FaBarsStaggered } from 'react-icons/fa6';

import { RxCross1 } from 'react-icons/rx';
import { Link } from 'react-scroll';
import { motion, useAnimation } from 'framer-motion';

export default function Navbar() {
  const [nav, setNav] = useState(false); // For toggling hamburger menu
  const [visible, setVisible] = useState(true); // Visibility navlinks
  const [prevScrollPos, setPrevScrollPos] = useState(0); // Previous scroll position

  const controls = useAnimation();

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollPos = window.scrollY;

      setVisible(currentScrollPos >= 150);
      console.log(currentScrollPos);

      // const areNav
      setPrevScrollPos(currentScrollPos);
      // console.log(currentScrollPos);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [prevScrollPos]);

  useEffect(() => {
    console.log('Visible:', visible); // Add this line
    // console.log('Hamburger Visible:', hamburgerVisible); // Add this line
    controls.start(
      visible ? { opacity: 1 } : { opacity: 0, transition: { duration: 0.5 } }
    );
  }, []);

  const handleClick = () => setNav(!nav); //logic for mobile useState

  return (
    <motion.div
      className={`text-white-300 fixed w-full h-[80px] flex justify-between items-center px-4 bg-[#1B252A] ${
        !visible && 'hidden'
      }`}
      initial={{ opacity: 0 }}
      animate={{ opacity: 2 }}
      transition={{ duration: 1 }}
    >
      <div onClick={handleClick}>
        {/* {visible && <FaBarsStaggered className="text-white w-8 h-8 ml-auto" />} */}
        {window.scrollY > 150 && (
          <FaBarsStaggered className="text-white w-8 h-8 ml-auto" />
        )}
      </div>


      <ul
        className={`montserrat hidden md:flex text-white ml-auto ${
          !visible && 'hidden my-custom-hidden-class'
        }`}
      >
        <motion.li
          animate={controls}
          style={{ opacity: 0 }}
          transition={{ duration: 2 }}
        >
          <Link to="home" smooth={true} duration={500}>
            HOME
          </Link>
        </motion.li>
        <motion.li
          animate={controls}
          style={{ opacity: 0 }}
          transition={{ duration: 2 }}
        >
          <Link to="about" smooth={true} duration={500}>
            ABOUT
          </Link>
        </motion.li>
        <motion.li
          animate={controls}
          style={{ opacity: 0 }}
          transition={{ duration: 2 }}
        >
          <Link to="skills" smooth={true} duration={500}>
            SKILLS
          </Link>
        </motion.li>
        <motion.li
          animate={controls}
          style={{ opacity: 0 }}
          transition={{ duration: 2 }}
        >
          <Link
            to="contact"
            smooth={true}
            duration={500}
          
          >
            CONTACT
          </Link>
        </motion.li>
      </ul>

      <ul
        className={
          !nav
            ? 'hidden'
            : 'absolute top-0 left-0 w-full h-screen bg-[#9F78E7] flex flex-col justify-center items-center text-white'
        }
      >
        <li className="py-6 text-4xl">
          <Link onClick={handleClick} to="home" smooth={true} duration={500}>
            Home
          </Link>
        </li>
        <li className="py-6 text-4xl">
          <Link onClick={handleClick} to="about" smooth={true} duration={500}>
            ABOUT
          </Link>
        </li>
        <li className="py-6 text-4xl">
          <Link onClick={handleClick} to="skills" smooth={true} duration={500}>
            SKILLS
          </Link>
        </li>
        <li className="py-6 text-4xl">
          <Link onClick={handleClick} to="work" smooth={true} duration={500}>
            WORK
          </Link>
        </li>
        <li className="py-6 text-4xl">
          <Link onClick={handleClick} to="contact" smooth={true} duration={500}>
            CONTACT
          </Link>
        </li>
      </ul>
    </motion.div>
  );
}