I am building a reusable dropdown component in React that can be toggled both by clicking its button and by clicking on external elements (watchElements). The dropdown works fine individually, but when I render multiple instances of the dropdown, clicking any button or external element toggles all dropdowns at once.

I want each dropdown instance to manage its own state independently so that clicking on a specific button or external element toggles only that specific dropdown.

Here is the current code for the Dropdown component:

import React, { useState, useEffect, useRef } from "react";

mport Button from "./Button";
import { RiArrowDownCircleFill } from "@remixicon/react";
import { constants } from "../constants";

const Dropdown = ({
  content,
  img = {
    url: "",
    alt: ""
  },
  img_classes = "",
  btn_classes = "",
  className = "text-center",
  content_wrapper_classes = "",
  btn_child = (
    <RiArrowDownCircleFill
      size={constants.static_sytles.icon_size_sm}
      className="text-white animate-bounce"
    />
  ),
  children,
  watchElements = []
}) => {
  const [isOpen, setIsOpen] = useState(false); 
  const dropdownRef = useRef(null);

  const toggleDropdown = (event) => {
    // console.log(dropdownRef.current)
    console.log('here is the event', event.target)
    console.log(dropdownRef.current.contains(event.target))
    if (dropdownRef.current && dropdownRef.current.contains(event.target)) {
      setIsOpen((prev) => !prev);
    }
  };

  const closeDropdown = () => {
    setIsOpen(false);
  };

  const handleClickOutside = (event) => {
    if (
      dropdownRef.current &&
      !dropdownRef.current.contains(event.target) &&
      !watchElements.some(
        (el) => el && el.contains && el.contains(event.target)
      )
    ) {
      closeDropdown();
    }
  };

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);

    if (watchElements.length) {
      watchElements.forEach((watchElement) => {
        if (watchElement) {
          watchElement.addEventListener("click", toggleDropdown);
        }
      });
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);

      if (watchElements.length) {
        watchElements.forEach((watchElement) => {
          if (watchElement) {
            watchElement.removeEventListener("click", toggleDropdown);
          }
        });
      }
    };
  }, [watchElements]);

  return (
    <div className={`${className}`}>
      <Button
        className={`${btn_classes} mt-3 flex items-center justify-center w-full`}
        // onClick={toggleDropdown}
        isDefault={false}
      >
        {btn_child}
      </Button>

      {/* Dropdown Menu */}
      <div
       ref={dropdownRef}
        className={` ${content_wrapper_classes} right-0 top-full w-full bg-white ring-opacity-5 overflow-hidden transition-all duration-700 ease-in-out ${
          isOpen  ?  "max-h-screen animate-flip-down" : "max-h-0"
        }`}
      >
        {img.url && (
          <img className={`${img_classes}`} src={img.url} alt={img.alt} />
        )}
        {children}
      </div>
    </div>
  );
};

export default Dropdown;

Usage:

const containerRefs= React.useRef([]);

{constants.home_services.map((service, index) => (
  <div
    className="w-full relative"
    key={index}
    ref={(el) => (containerRefs.current[index] = el)}
  >
    <div
      className={`${constants.static_sytles.bg_color_secondary_heavy} shadow-sm ${constants.static_sytles.shadow_secondary_heavy} px-4 py-2 rounded-md gap-y-2 border-2 border-[#9b9fab] flex justify-between items-center cursor-pointer`}
    >
      <h2 className="text-xl md:text-2xl font-light">{service.name}</h2>
      <img
        className="h-14 w-20 rounded-sm"
        src={service.ImgUrl}
        alt={service.name}
      />
    </div>
    <Dropdown
      watchElements={containerRefs.current}
      img={{ url: service.ImgUrl, alt: service.name }}
      btn_classes=""
      className=""
      img_classes="w-full rounded-sm h-80"
      content_wrapper_classes="rounded-lg"
      btn_child={
        <RiArrowDropDownFill
          className={`${constants.static_sytles.icon_color_secondary} ${constants.static_sytles.icon_size_sm}`}
        />
      }
    >
      <p className="mt-2 p-3">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium,
        quisquam voluptatem odio sapiente mollitia, autem nostrum quod vitae
        aliquam quam non exercitationem consequatur architecto distinctio
        numquam rerum odit. Nemo, eaque!
      </p>
    </Dropdown>
  </div>
))}

I have tried to use the watchElements prop to hold the references of external elements to attach eventListners and use them to toggle dropdowns