React - How to display only one instance of a dropdown component

Question

I have a custom dropdown component that contains different items depending on the caller, its connected to a state that toggles its visibility, to be able to render it i use this method

Code

Dropdown.jsx

const Dropdown = ({ children }) => {
  return (
    <div className={classes.dropdown}> {children} </div>)};

Component1.jsx

const Component1 = () => {
 return (
 .....
 {dropdownOpen && <Dropdown> ... </Dropdown>)
}

Component2.jsx

const Component2 = () => {
 return (
 .....
 {dropdownOpen && <Dropdown> ... </Dropdown>)
}

the problem is whenever i click on any of the caller(button, icon ..etc) it shows dropdowns for all components bcz dropdownOpen is true (i use the same logic in different locations)

So how i render only one dropdown for that particular component without showing it for others