custom

//Parent component
const [show, setShow] = useState({
    1 : false,
    2 : false,
    3 : false,
    4 : false,
  })
const panelIdx = ["1","2","3","4"]

<AntCollapse isFollowed={followed[1]} show={show[1]} panelID={panelIdx[0]} setShow={setShow} header="Follow XXX on Telegram">
     <Row type='flex' align='middle' justify='center'>
         <Button onClick={() => {handleFollow(1); handleShow(); }} style={buttonStyle2} disabled={clicked}>Continue</Button>
     </Row>
</AntCollapse>
__________________________________________________________________________________________
//Child Component
  const [opened, setOpen] = useState(false);
  const [key, setKey] = useState([]);

  useEffect(() => {
    setFollowed(props.isFollowed)
  }, [props.isFollowed])

  const addPanelID = (num) => {
    if(key.length === 0)
      setKey(state => [...state, num])
    else
      setKey([])
  }

  const handlePanel= () => {
    setOpen(prev => !prev)
  }

  const handleShowPanel = (id) => {
    const val = !props.show
    props.setShow({[id] : val})
  }

  const combineFunc = () => {
    handlePanel()
    addPanelID(props.panelID)
    handleShowPanel(props.panelID)
  }


  return (
    <StyledCollapse activeKey={props.show ? key : []} onChange={combineFunc}>
      <AntCollapse.Panel
        {...props}
        header={props.header}
        showArrow={false}
        bordered={false}
        extra={
          //some code
        }
      >
      {props.children}
      </AntCollapse.Panel>
    </StyledCollapse>
  );