overflow-x-hidden is weirdly causing "window" object to stop working

Question

This is a simplified example of whats happening. This code is working fine (successfully disables the scroll)

function App() {

   useEffect(()=>{
     window.document.body.style.overflow = "hidden"
   },[])

   return (
    <div className={`w-screen h-screen bg-black`}>
       <div className={`h-[200vh] w-screen bg-gray-700`}/>
    </div>
   )
}

but when i add "overflow-x-hidden" to the parent div, it stops working (not disabling the scroll)

function App() {

   useEffect(()=>{
     window.document.body.style.overflow = "hidden"
   },[])

   return (
    <div className={`w-screen h-screen bg-black overflow-x-hidden`}>
       <div className={`h-[200vh] w-screen bg-gray-700`}/>
    </div>
   )
}

I was just trying to hide any horizontal scrollbar