Reactangular - React function component

app.tsx

import React, { useState, useRef, useEffect } from 'react';
import '@reactangular/elements';

const App = () => {
  const [counter, setCounter] = useState(0);
  const buttonRef = useRef(null);

  useEffect(() => {    
    const handleEvent = () => setCounter(counter + 1);
    const btnAddToCart = buttonRef.current;

    btnAddToCart.addEventListener('addToCart', handleEvent);
    return () => btnAddToCart.removeEventListener('addToCart', handleEvent);
  }, []);

  return (
    <>    
      <shopping-cart counter={ counter } />
      <add-to-cart-button type="React" ref={ buttonRef } />
    </>
  );
};

export default App;

Would it not be better to run the Effect only 1x using any empty dependency array?

useEffect(() => {    
  const handleEvent = () => setCounter(counter + 1);
  const btnAddToCart = buttonRef.current;

  btnAddToCart.addEventListener('addToCart', handleEvent);
  return () => btnAddToCart.removeEventListener('addToCart', handleEvent);

}, []);

Thanks Thomas, that sounds like a good idea!
I think I had it like that at first and now I don't remember why I added the counter.
Running the effect every time the counter changes shouldn't be necessary.