title: Next Js Accrodion should be collapse when click arrow icon
body: <p>I am using <code>Accordion</code> in <code>next js</code>. I am following <a href="https://react-accessible-accordion.springload.co.nz/" rel="nofollow noreferrer">this (react-accessible-accordion)</a> package.</p>
  <p>Currently it is getting collapse when main <code>div</code> is getting clicked. What i want to achieve is According should be collapse when click on arrow icon not on main <code>div</code>.</p>
  <p>If there is an alternate way of doing this please let me know.</p>
  <p><strong>UPDATE</strong></p>
  <p>Here is the <a href="https://codesandbox.io/s/react-accordion-using-react-hooks-9uuvc?file=/components/Chevron.js:0-621" rel="nofollow noreferrer">code sandbox</a></p>
  <p>What i want to achieve is <a href="https://i.imgur.com/b6BVPyp.png" rel="nofollow noreferrer">explained here</a>
  Thanks!</p>