Window eventListener (iframe) not working after component re-render

Question

I'm experiencing the following problem; I have created a React project in which I have added three individual components. These components are wrapped in an <iframe>. I use the following code to add the eventListener.

const Component = () => {
  useEffect(() => {
    window.addEventListener('keydown', console.log)
    return () => window.removeEventListener('keydown', console.log)
  }, []);

  return <>HelloWorld</>;
}

My application has a global expand state variable that toggles the component. On the initial render, the eventListener works as expected. When I open and close the component, however, the eventListener only works whenever the component is closed.

I have tried removing the as a wrapper. If I do this, the setup works as expected.

Has anyone ever experienced something similar? This makes me think that it might have something to do with a underlying policy within i.e. Chrome.

Thank you for your time, help would very much be appreciated.