You shouldn't really manipulate the dom this way in react. The way to do this is to have your close buttons have an onClick handler that calls a callback given as a prop from the parent, i.e.

const ParentComponent = () => {
  const [closed, setClosed] = useState(false)
  const close = useCallback(() => setClosed(true), [])
  return <div style={closed ? { display: 'none' } : null}>
    <ChildComponent close={close}/>
  </div>
}

const ChildComponent = ({close}) => (<span onClick={close}>Close</span>)

Hey brother, you are attaching a listener to every element which is alright but it is not efficient at all. Imagine you have 1000 elements and 1000 click listeners..what you can also try is Event bubbling or event propagation...If you do not understand these concepts , you can go through the following videos:
https://www.youtube.com/watch?v=aVSf0b1jVKk&t=348s

youtube.com/watch?v=3KJI1WZGDrg

First thing to try, open up your browser's console log window and see if it is telling you anything interesting either when the page is first loading, or when you press the button.

Without seeing the rest of the page, there isn't too much else we could speculate on, however.