title: Multiple panels open and close at one click - Ant Design Collapse
body: <p>So I have this <code>Custom Collapse</code> and everytime I toggle <strong>1 panel</strong>, all <strong>4 of them open at the same time</strong>.<br />
  Here's how I change the state between <code>parent component</code> and <code>child component</code>:</p>
  <pre class="lang-js prettyprint-override"><code>//Parent Component
  
  const [show, setShow] = useState(false)
  const handleShow = (idx) =&gt; {
      setFollowed(prev =&gt; !prev)
    }
  &lt;AntCollapse isFollowed={followed[1]} show={show} keys=&quot;1&quot; setShow={setShow} header=&quot;Follow XXX on Telegram&quot;&gt;
       //some code
       &lt;Row type='flex' align='middle' justify='center'&gt;
           &lt;Button onClick={() =&gt; {handleFollow(1); handleShow(); }} style={buttonStyle2} disabled={clicked}&gt;Continue&lt;/Button&gt; 
           &lt;Button type='text' style={{color:'#EB7B59', border:'#f7f7f7', background:'#f7f7f7',height: &quot;2em&quot;, fontSize:'16px', margin:'10px 0 0 10px'}}&gt;Cancel&lt;/Button&gt;
       &lt;/Row&gt;
  &lt;/AntCollapse&gt;
  
  //-------------------------------------------------------------------
  
  //Child Component
  
  const [key, setKey] = useState([props.keys]);
  const handlePanelClose = () =&gt; props.setShow(prev =&gt; !prev);
  &lt;StyledCollapse accordian activeKey={props.show ? key : []} onChange={combineFunc}&gt; 
        &lt;AntCollapse.Panel
          {...props}
          header={props.header}
          showArrow={false}
          bordered={false}
          key={props.keys}
          extra={
              //some code
          }
        &gt;
        {props.children}
        &lt;/AntCollapse.Panel&gt;
  &lt;/StyledCollapse&gt;
  </code></pre>
  <p>How do I set the state for each panels individually?</p>