How to make dropdown close or open when I click on the button when there is ref used? (React)

I have this issue that when I want to close my dropdown menu that opens when I click on the hamburger menu, it doesn’t want to close when I click on the button again, the reason why it doesn’t work is because I added the functionality to close the dropdown when I click outside the dropdown. I created that functionality with using ref from React.

Here is my code:

const Navbar = () => {
  const [open, setOpen] = useState(false);

  const ref = useRef();

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (!ref?.current?.contains(event.target)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);

  return (
    <div className="navbar_container">
      <div className="navbar_inner_container">
        <div className="logo_container">
          <img src={Logo} alt="logo" className="navbar_logo" />
        </div>
        <div
          className="hamburger_menu"
          onClick={() => {
            setOpen(!open);
          }}
        >
          <Dropdown open={open} dropdownRef={ref} />
        </div>
      </div>
    </div>
  );
};

export default Navbar;

const Dropdown = ({ open, dropdownRef }) => {
  return (
    <div ref={dropdownRef}>
      {open === true ? (
        <div className="dropdown_container">
          <div
            className="dropdown_item"
            onClick={() =>
              window.scrollTo({
                top: document.getElementsByClassName("functions_container")[0]
                  .offsetTop,
                behavior: "smooth",
              })
            }
          >
            <button className="navbar_link">Functions</button>
          </div>
          <div
            className="dropdown_item"
            onClick={() =>
              window.scrollTo({
                top: document.getElementsByClassName("partners_container")[0]
                  .offsetTop,
                behavior: "smooth",
              })
            }
          >
            <button className="navbar_link">Partner</button>
          </div>
          <div
            className="dropdown_item"
            onClick={() =>
              window.scrollTo({
                top: document.getElementsByClassName("statements_container")[0]
                  .offsetTop,
                behavior: "smooth",
              })
            }
          >
            <button className="navbar_link">Statements</button>
          </div>
          <div
            className="dropdown_item"
            onClick={() =>
              window.scrollTo({
                top: document.getElementsByClassName("contact_container")[0]
                  .offsetTop,
                behavior: "smooth",
              })
            }
          >
            <button className="navbar_link">Contact</button>
          </div>
          <img
            src={LanguageFlag}
            alt="lanugage_flag"
            className="language_flag"
          />
        </div>
      ) : null}
    </div>
  );
};

export default Dropdown;

Does anyone know what is the reason for the dropdown not closing when I press on the hamburger button again, as far as I know by using the !open it should close.

>Solution :

It will be triggering both functions at the same time. Which causes problems. You Have to Include the Hamburger button also in the ref.

  const Navbar = () => {
  const [open, setOpen] = useState(false);

  const ref = useRef();

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (!ref?.current?.contains(event.target)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);

  return (
    <div className="navbar_container">
      <div className="navbar_inner_container">
        <div className="logo_container">
          <img src={Logo} alt="logo" className="navbar_logo" />
        </div>
        <section ref={ref}>
        <div
          className="hamburger_menu"
          onClick={() => {
            setOpen(!open);
          }}
        >
          <Dropdown open={open}  />
        </div>
</section>
      </div>
    </div>
  );
};

export default Navbar;

const Dropdown = ({ open }) => {
  return (
    <div >
      {open === true ? (
        <div className="dropdown_container">
          <div
            className="dropdown_item"
            onClick={() =>
              window.scrollTo({
                top: document.getElementsByClassName("functions_container")[0]
                  .offsetTop,
                behavior: "smooth",
              })
            }
          >
            <button className="navbar_link">Functions</button>
          </div>
          <div
            className="dropdown_item"
            onClick={() =>
              window.scrollTo({
                top: document.getElementsByClassName("partners_container")[0]
                  .offsetTop,
                behavior: "smooth",
              })
            }
          >
            <button className="navbar_link">Partner</button>
          </div>
          <div
            className="dropdown_item"
            onClick={() =>
              window.scrollTo({
                top: document.getElementsByClassName("statements_container")[0]
                  .offsetTop,
                behavior: "smooth",
              })
            }
          >
            <button className="navbar_link">Statements</button>
          </div>
          <div
            className="dropdown_item"
            onClick={() =>
              window.scrollTo({
                top: document.getElementsByClassName("contact_container")[0]
                  .offsetTop,
                behavior: "smooth",
              })
            }
          >
            <button className="navbar_link">Contact</button>
          </div>
          <img
            src={LanguageFlag}
            alt="lanugage_flag"
            className="language_flag"
          />
        </div>
      ) : null}
    </div>
  );
};

export default Dropdown;