Сокращение лишних вызовов useEffect при подписке на события окна в React

Необходимо избавиться от избыточных срабатываний useEffect в компоненте WindowEvent, чтобы обработчик события добавлялся и удалялся только при реальных изменениях зависимостей.

function WindowEvent({
  eventName,
  callback,
  listenerOptions
}: {
  eventName: string;
  callback: EventListener;
  listenerOptions?: EventListenerOptions;
}){
  useEffect(() => {
    console.log('useEffect');
    window.addEventListener(eventName, callback, listenerOptions);

    return () => {
      window.removeEventListener(eventName, callback, listenerOptions);
    };
  }, [eventName, callback, listenerOptions]);

  return null;
}

export default function App() {
  const [visible, setVisible] = useState(false);
  const toggleVisibility = useCallback(() => {
    setVisible(prev => !prev);
  }, []);

  return (
    <>
      <Button onClick={toggleVisibility} />
      <WindowEvent eventName="click" callback={() => console.log("click")} />
      {visible && (<div>lorem ipsum</div>)}
    </>
  );
}