title: how do i open only one panel when I use mapping in react for panels
body: <p>I have created a panel to map through my users and display their songs below their name. 
  The problem im having is that when I click on the {username} it opens all of the accordion panels. I'd like it to only open the accordion for the panel being clicked.</p>
  
  <pre><code>                          &lt;PanelGroup accordion id="accordion-example"&gt;
                                  {this.state.allUsersList.map((user, index) =&gt; (
                                      &lt;Panel&gt;
                                          &lt;Panel.Heading&gt;
                                              &lt;Panel.Title toggle &gt;
                                                  &lt;Button key={index} className="btn-uvideo"&gt;{user.Username}&lt;/Button&gt;
                                              &lt;/Panel.Title&gt;
                                          &lt;/Panel.Heading&gt;
                                          &lt;Panel.Body collapsible&gt;
                                              &lt;ListGroup&gt;
                                                  {user.songs.map((song, index) =&gt; (
                                                      &lt;ListGroupItem key={index}&gt;
                                                          &lt;Button className="btn-video" onClick={() =&gt; this.handleSongChange(song)}&gt;
                                                              &lt;p&gt;{song.SongName}&lt;/p&gt;
                                                          &lt;/Button&gt;
                                                      &lt;/ListGroupItem&gt;
                                                  ))}
                                              &lt;/ListGroup&gt;
                                          &lt;/Panel.Body&gt;
                                      &lt;/Panel&gt;
                                  ))}
                              &lt;/PanelGroup&gt;
  </code></pre>