Stop vertical scroll when modal is open React - reactjs

Question

I have a navigation bar in functional React with a mobile menu in it. The issue is that I have an animation that causes the navigation to hide unless the user scrolls up. When the navigation bar hides with this animation it drags mobile menu with it making it impossible to close the menu without being directed to a different page.
I would like it so that when the mobile menu is open scrolling is disabled until the user moves to a new page or closes the menu. Avoiding the issue of the navigation bar disappearing.
I have tried using in the event listener document.body.style.overflow = "hidden"; However this make the page stop scrolling regardless of whether the menu is open.
The scroll animation is triggering using an event listener and useEffect hook so I need a way of working it into this event listener so that when the menu is visible scroll can be disabled.
Heres the component:
import * as React from 'react';
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Squash as Hamburger } from 'hamburger-react';
import { debounce } from './utilities/helpers';
const links = [
{name: "Home", path: "/"},
{name: "Projects", path: "/projects"},
{name: "Contact", path: "/contact"}
];
export default function Header() {
//Navbar scroll hide
const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true);
const handleScroll = debounce(() => {
const currentScrollPos = window.pageYOffset;
setVisible((prevScrollPos > currentScrollPos && prevScrollPos - currentScrollPos > 75) || currentScrollPos < 10); //Check if user has scrolled beyond the navbar height to hide or less then 10 to show navbar
setPrevScrollPos(currentScrollPos); //Sets last scroll position
}, 100); //Time interval for debounce
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, [prevScrollPos, visible, handleScroll]);
//Hamburger state
const [isOpen, setOpen] = useState(false);
//Set navbar background without scroll
function ToggleNavLinks() {
var navBar = document.getElementById('navbar');
navBar.style.background = '#181a1d';
};
//Scroll event
window.addEventListener('scroll', function() {;
var navBar = document.getElementById('navbar');
//If user scrolls 1 or more pixels
if(window.scrollY >= 1){
navBar.style.background = '#181a1d';
navBar.style.boxShadow = 'box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)';
}
//Else they haven't scrolled
else {
navBar.style.background = 'none';
navBar.style.boxShadow = 'none'
}
});
return (
<nav style={{ top: visible ? '0' : '-75px' }} id="navbar" className="w-full h-[75px] fixed py-2 px-3 sm:px-6 flex justify-between items-center z-20 transition-all duration-300 ease-in-out">
{/* Logo */}
<Link to="/">
<div className="bg-[url('../public/Images/logo.png')] hover:bg-[url('../public/Images/logo-hover.png')] w-[260px] h-[60px]"></div>
</Link>
<div className="flex"> {/* Container for links and menu */}
{/* Hamburger */}
<div className="lg:hidden mb-0.5 z-10" onClick={(ToggleNavLinks)}> {/* Had to use parent element as Tailwind doesn't effect custom React components */}
<Hamburger
color="#ffffff"
easing="ease-in-out"
rounded
toggled={isOpen}
toggle={setOpen}
/>
</div>
{/* If menu is open */}
{isOpen && (
<>
<div className="h-screen w-screen absolute mt-[3.75rem] left-0 bg-black opacity-60 blur-sm"></div>
<ul className="h-screen w-3/5 sm:w-1/2 md:w-2/5 bg-quaternary flex flex-col lg:flex-row items-center absolute top-0 right-0 pt-32">
{links.map((link) => (
<li className="m-5 lg:my-0 lg:mx-5 leading-10">
<Link
className="text-2xl font-medium text-white hover:text-primary transition duration-300 ease-in-out"
to={link.path}
onClick={() => setOpen(false)}
>
{link.name}
</Link>
</li>
))}
</ul>
</>
)}
{/* Links */}
<ul className= "hidden lg:flex flex-row">
{links.map((link) => (
<li className="m-5 lg:my-0 lg:mx-5">
<Link className="text-2xl font-medium text-white hover:text-primary transition duration-300 ease-in-out" to={link.path}>
{link.name}
</Link>
</li>
))}
</ul>
</div>
</nav>
);
}
Heres the current bug:
Heres how its intended too look with scroll locked:
enter image description here