I’m using a toggle to show an element using useReducer in NextJs. If I were to put the onClick function on a div, it does not fire but when I use a button it does. Any insight on this behavior?

const [isOpen, toggleIsOpen] = useReducer((state) => {        
    return !state
}, false)

<button onClick={toggleIsOpen}>TOGGLE</button>

This works

<div className='ham float-end' onClick={toggleIsOpen}>
    ...
</div>

This doesn’t