title: Hide dropdowns in loop on click outside
body: <p>I have an array of values which would render a list with a dropdown menu.
  I would show/hide the dropdown on click of an element.</p>
  <pre><code> projectData.map(project =&gt; (
    &lt;div&gt;
      &lt;div&gt;{project.name}&lt;/div&gt;
      &lt;div
        onClick={() =&gt; setDropdownId((prevState) =&gt; (
          prevState === project.id ? null : project.id)
        )}
      &gt;
        Show
      &lt;/div&gt;
      {dropdownId === project.id &amp;&amp; (
        &lt;ul className=&quot;dropdown&quot;&gt;
          &lt;li&gt;option&lt;/li&gt;
        &lt;/ul&gt;
      )}
    &lt;/div&gt;
  ))
  </code></pre>
  <p>How can I hide the opened dropdown on outside click?
  I tried with ref but is not working as expected as the elements are in a loop.</p>