How to disable scroll on Safari? Nextjs

Question

I am trying to disable scroll when the navbar menu is open on mobile, it works perfectly on chrome but not on safari.

I have seen that many people have similar problems on this browser, as it doesn´t all work the same way.

I am using this useEffect code to disable the scroll on chrome:

const Navbar = (props) => {
  
  const [isOpen, setOpen] = useState(false);
  const toggleMenu = () => setOpen(!isOpen);

  useEffect(() =>{
    document.body.style.overflowY = isOpen ? 'hidden' : 'auto';
  }, [isOpen])

  return (
<header className="relative bg-black">
        <div className=""></div>

{isOpen && (
          <div className=""></div>

What can I change this to, in order to keep it all working as intended on chrome but also work properly on safari? If anyone could help that would be great!