title: Collapse React-Bootstrap Accordion from Within Accordion.Collapse component
body: <p>I'm trying to pass a decorated onClick function returned from the react-bootstrap useAccordionToggle function into a component so that I can hide the Accordion from an interaction on that component. Something goes wrong and the decorated function that is created is no longer able to correctly access the contexts that react-bootstrap sets up (it seems to choke on SelectableContext <a href="https://github.com/react-bootstrap/react-bootstrap/blob/master/src/AccordionToggle.js#L31" rel="nofollow noreferrer">here</a>). I'm fairly new to react, and just learned about contexts while looking into why this is not working, I wouldn't be surprised if that is where my confusion comes from. It seems to not be getting the correct context at the time of the method construction.</p>
  <p>I have included a small test case <a href="https://codesandbox.io/s/react-bootstrap-playground-jc7r9?file=/src/index.js:0-1085" rel="nofollow noreferrer">Click Here for a fiddle</a>:</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  
  import { Button, Accordion, Card, useAccordionToggle } from &quot;react-bootstrap&quot;;
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  
  import &quot;./styles.css&quot;;
  
  const InternalComponent = props =&gt; {
    console.log(props.onClick);
    return (
      &lt;div&gt;
        &lt;button onClick={() =&gt; props.onClick()}&gt;here for seeing&lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  function App() {
    const x = useAccordionToggle(0, () =&gt; {
      /**/
    });
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;&gt;
          &lt;Accordion&gt;
            &lt;Card&gt;
              &lt;Card.Header&gt;
                &lt;Accordion.Toggle as={Button} variant=&quot;link&quot; eventKey=&quot;0&quot;&gt;
                  create new group
                &lt;/Accordion.Toggle&gt;
              &lt;/Card.Header&gt;
              &lt;Accordion.Collapse eventKey=&quot;0&quot;&gt;
                &lt;Card.Body&gt;
                  &lt;InternalComponent onClick={x} /&gt;
                &lt;/Card.Body&gt;
              &lt;/Accordion.Collapse&gt;
            &lt;/Card&gt;
          &lt;/Accordion&gt;
        &lt;/&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(&lt;App /&gt;, rootElement);
  
  </code></pre>