Screen getting stuck, when used with conditional display none css property

[prakhartech]

https://codesandbox.io/p/sandbox/react-wordcloud-responsive-forked-hvhqsy
`function App() {
const [hide, setHide] = React.useState(false);
return (

<div onClick={() => setHide(!hide)}>Buttion

  <div
    style={{
      width: "100%",
      height: "100%",
      display: hide ? "none" : "block",
    }}
  >
    <ReactWordcloud words={words} />
  </div>
</div>

);
}`

I was using ReactWordCloud in my project where use case was, on some state change, I want to hide a page which also contains my ReactWordCloud, and to hide it I am using display: none property of css but when I am changing it back to display: block my screen is getting stuck.
To clear out any doubts of my code, I tried it in the codeSandbox which I mentioned above, but it is showing the same behaviour.
I know the workaround it, but it took me a while to find out that what was causing the actual issue in my screen. So it would be great if this could be fixed.