title: react-bootstrap accordion issue in the arrow icons
body: <p>I am using react-bootstrap accordion to my project. i am trying to add up and down arrow button indicators to my accordion header. please check sample code for the question</p>
  <pre><code>  const [open, setOpen] = useState(false);
  
      &lt;Accordion.Toggle as={Button} variant=&quot;link&quot; eventKey=&quot;2&quot; className=&quot;according-text&quot; onClick={() =&gt; setOpen(!open)}&gt;
                        &lt;i className=&quot;mdi mdi-view-headline&quot;&gt; &lt;/i&gt;      LINES  {open ? &lt;i className=&quot;mdi mdi-menu-down&quot;&gt;&lt;/i&gt; : &lt;i className=&quot;mdi mdi-menu-up&quot;&gt;&lt;/i&gt;}
                      &lt;/Accordion.Toggle&gt;
  &lt;Accordion.Toggle as={Button} variant=&quot;link&quot; eventKey=&quot;2&quot; className=&quot;according-text&quot; onClick={() =&gt; setOpen(!open)}&gt;
                        &lt;i className=&quot;mdi mdi-view-headline&quot;&gt; &lt;/i&gt;      MATCH INVICE LINES{open ? &lt;i className=&quot;mdi mdi-menu-down&quot;&gt;&lt;/i&gt; : &lt;i className=&quot;mdi mdi-menu-up&quot;&gt;&lt;/i&gt;}
                      &lt;/Accordion.Toggle&gt;
  </code></pre>
  <p>when i click first accordion header, second accordion header icon is changed. check below image
  initial state
  <a href="https://i.stack.imgur.com/M25za.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M25za.png" alt="enter image description here" /></a></p>
  <p>after clicked first accordion header
  <a href="https://i.stack.imgur.com/EPV8E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EPV8E.png" alt="enter image description here" /></a></p>
  <p>how i prevent this. can you help me to fix this? thanks</p>