onClick to open menu conflicting with useClickOutside custom hook in React - reactjs

Question

I am trying to implement a custom hook to close my nav menu with any click outside of it following this tutorial - https://www.youtube.com/watch?v=XEQ9nEHYIbw&list=PLZlA0Gpn_vH-aEDXnaFNLsqiJWFpIWV03&index=5&t=119s
However it is not working and I can't understand why it's behaving differently.
I have a button with an onClick function to open the menu. I want the custom hook to close the menu on any click outside it. However when I click the menu button to open the menu, the click events are conflicting - the menu state changes to open and then the custom hook runs as well and closes it again.
I have resolved the issue by passing a ref to the button to the hook as well - but is there a better way? Why is this behaving differently to the tutorial where that isn't required?
import "./styles.css";
import { useRef, useState } from "react"
import useClickOutside from "./useClickOutside"
export default function App() {
const [open, setOpen] = useState(false)
const navRef = useRef()
console.log(open)
useClickOutside(navRef, () => {
if (open) setOpen(false);
});
return (
<div className="App">
<header>
<div className="container">
<h1>Logo</h1>
<button onClick={() => setOpen(true)}>{open ? "X" : "Menu"}</button>
</div>
<nav ref={navRef} className={open ? "" : "hide"}>
Home
About
</nav>
</header>
<h1>Main content..</h1>
</div>
);
// useClickOutside.js
import useEventListener from "./useEventListener"
export default function useClickOutside(ref, cb) {
useEventListener(
"click",
(e) => {
if (ref.current == null || ref.current.contains(e.target)) return;
cb(e);
},
document
);
}
// useEventListener.js
import { useEffect, useRef } from "react";
export default function useEventListener(eventType, callback, element = window) {
const callbackRef = useRef(callback);
useEffect(() => {
callbackRef.current = callback;
}, [callback]);
useEffect(() => {
const handler = (e) => callbackRef.current(e);
element.addEventListener(eventType, handler);
return () => element.removeEventListener(eventType, handler);
}, [eventType, element]);
}