How to use stopPropagation() with Next.js?

I am trying to use stopPropagation so my dropdown menu will close after I click on any other elements.

When I try to use stopPropagation & updating a boolean state the button re-render the page (which reset the state back to ‘false’) than updating the state to true and it stuck on "true" no matter what.

I wrote a code for an example:

import { useEffect, useState } from "react";

export default function IndexPage() {
  const [state, setState] = useState(false);

  useEffect(() => {
    document.body.addEventListener("click", () => {

  const onButtonClick = (e) => {


  return (
      <button onClick={onButtonClick}>Click</button>

      <h1>{state ? "true" : "false"}</h1>

This problem seems to appear only with Next.js

I wrote the same code with React app and there is no problem.

Next.js codesandbox link

React codesandbox link

9 thoughts on “How to use stopPropagation() with Next.js?”