How to make the components created by React work separately from each other?

Question

React

I wrote a component with a drop-down menu that opens when the user clicks on it. If you click on the menu label again or click on a free area outside this component, then the drop-down menu will collapse back.

However, without problems, this component only works when it is alone on the page. If you add a second such component, then you run into a problem: if you first expand both menu components, and then click on an empty area on the page, then instead of all these pull-out menus being collapsed, only one menu, which the user opened last, will be collapsed instead. . Help solve this problem so that when you click on a free area, all drop-down menus collapse.

Here is the code that was written for these components:
Open the code page.