title: How to add modal to react-smooth-dnd
body: <p>I am working on the following component which all it does is to create draggable DIV based on my items in DATA array.</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Container, Draggable } from &quot;react-smooth-dnd&quot;;
  
  const { useEffect, useState } = React;
  const DATA = [
    {
      items: [
        { id: &quot;1&quot;, label: &quot;1&quot;, status: &quot;⬤&quot; },
        { id: &quot;2&quot;, label: &quot;2&quot;, status: &quot;⬤&quot; },
        { id: &quot;3&quot;, label: &quot;3&quot;, status: &quot;⬤&quot; },
        { id: &quot;4&quot;, label: &quot;4&quot;, status: &quot;⬤&quot; },
        { id: &quot;5&quot;, label: &quot;5&quot;, status: &quot;⬤&quot; }
      ],
      tint: 6,
    }
  ];
  function LeadsOverview({ }) {
    const [items, setItems] = useState([]);
    const [isActive, setActive] = useState(&quot;false&quot;);
  
    const handleToggle = () =&gt; {
      setActive(!isActive);
    };
  
    return (
      &lt;div&gt;
        &lt;Container
          getChildPayload={(index) =&gt; {
            return items[index];
          }}
        &gt;
          {items &amp;&amp;
            items.map((item, groupIndex) =&gt; {
              return (
                &lt;Draggable key={item.tint}&gt;
                  &lt;div className={`holder holder--tint-${item.tint}`}&gt;
                    &lt;div className=&quot;holder__content&quot;&gt;
                      &lt;Container
                        className=&quot;list&quot;
                        groupName=&quot;LEADS_OVERVIEW&quot;
                      &gt;
                        {item.items.map((lead) =&gt; (
                          &lt;Draggable className=&quot;list__item&quot; key={lead.id}&gt;
                            &lt;div className=&quot;card&quot;&gt;{lead.label}
                              &lt;div className={isActive ? &quot;statusOn&quot; : &quot;statusOff&quot;}&gt;
                                &lt;button onClick={handleToggle}&gt;{lead.status}&lt;/button&gt;
                              &lt;/div&gt;
                            &lt;/div&gt;
                          &lt;/Draggable&gt;
                        ))}
                      &lt;/Container&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/Draggable&gt;
              );
            })}
        &lt;/Container&gt;
      &lt;/div&gt;
    );
  }
  
  const useStyles = makeStyles({
    layoutRoot: {},
  });
  
  function testPage() {
    const classes = useStyles();
    const pageLayout = useRef(null);
  
    return (
      &lt;FusePageSimple
        classes={{
          root: classes.layoutRoot,
        }}
        header={
          &lt;div className=&quot;flex flex-col flex-1&quot;&gt;
            &lt;div className=&quot;flex items-center p-24 px-12&quot;&gt;
              &lt;div className=&quot;flex-1 lg:px-12&quot;&gt;
                &lt;h2&gt;Hello World&lt;/h2&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        }
  
        content={
          &lt;div className=&quot;p-30&quot;&gt;
            &lt;LeadsOverview /&gt;
          &lt;/div&gt;
        }
      /&gt;
    );
  }
  
  export default testPage;
  </code></pre>
  <p>All I need is to add modal to each DIV. So when you click on each DIV, it should open up a modal which includes information for that DIV. Right now, whatever I try, it's gonna do it for ALL DIVs. How can I have separate modals for each DIV?</p>