title: How to configure Collapse toggle different on each element in the mapped array
body: <p>I have a mapped array</p>
  <pre><code>const numbers = [
      {id : 1, number : 1},
      {id : 2, number : 2},
      {id : 3, number : 3},
      {id : 4, number : 4},
  ]
  </code></pre>
  <p>It's not a real one but it is similar to the array which is I have from the api
  like</p>
  <pre><code>// state 
  const [open, setOpen] = useState(false);
  
  numbers.map((number) =&gt;
    &lt;Button
      key={number.toString()}
      onClick={() =&gt; setOpen(!open)}
      aria-controls=&quot;example-collapse-text&quot;
      aria-expanded={open}
    &gt;
      click
    &lt;/Button&gt;
  </code></pre>
  <p>and on click it returns</p>
  <pre><code>&lt;div style={{minHeight: '150px'}}&gt;
      &lt;Collapse in={open} dimension=&quot;width&quot;&gt;
        &lt;div id=&quot;example-collapse-text&quot;&gt;
          &lt;Card body style={{width: '400px'}}&gt;
              Some text
          &lt;/Card&gt;
        &lt;/div&gt;
      &lt;/Collapse&gt;
    &lt;/div&gt;
  </code></pre>
  <p>But problem is it's rendering the Collapse on each click on all the elements on the array, How can I make it unique to each element to work around.</p>