Stop click propagation in accordion header

React and synthetic events strike again!

TL;DR, the click event from your button isn’t a real click event, but one that react will dispatch in place of a native click. So your stopProp call won’t actually work.

What you can do is wire up something like this…

const button = useRef(null);
  useEffect(() => {
    if (button.current) {
      (button.current as HTMLElement).onclick = (e) => {
        console.log('handler stop');
        e.stopPropagation()
      } 
    }
  }, [button])

Where the button will have a native click handler.

Here’s a stackoverflow post to explain why in detail