title: how do i open a specific collapse accordian when using a anchor component in react typescript
body: <p>I am new to react and ant design, I want to open the specific accordion when clicking on to a specific place. The idea is that when I am clicking on the specific place the page roll over to that accordion( i am achieving this using <strong>Anchor Component of antd</strong>), but not opening that accordion. Here is my code where I am using anchor and collapse componenet. How do I proceed so that when i click on the specific div the page roll over to that place and accordion gets open?</p>
  
  <pre><code> import React, { Component } from 'react';
  import { Card, Timeline, Anchor, Collapse } from 'antd';
  const Panel = Collapse.Panel;
  import FlowData from './data';
  import './LearningPathFlowchart.scss';
  
  function callback(key: any) {
    console.log(key);
  }
  
  const { Link } = Anchor;
  
  interface ICollapseState {
    isOpen?: boolean;
  }
  
  interface Idata {
    href: string;
    title: string | React.ReactNode;
    content: string;
  }
  const text = `
    A dog is a type of domesticated animal.
    Known for its loyalty and faithfulness,
    it can be found as a welcome guest in many households across the world.
  `;
  
  export default class LearningPathFlowchart extends React.Component&lt;{}, ICollapseState&gt; {
    constructor(props: {}) {
      super(props);
      this.state = {
        isOpen: false,
      };
    }
  
    public onClick() {
      this.setState({ isOpen: true });
    }
    public render() {
      return (
        &lt;div&gt;
          &lt;Card hoverable style={{ width: '300px', margin: '0px auto', height: '800px' }}&gt;
            &lt;div className='learning-path__flowchart'&gt;
              &lt;Timeline&gt;
                &lt;Anchor affix={false} offsetTop={10} onClick={() =&gt; this.onClick}&gt;
                  {FlowData.data.map((value: Idata, index) =&gt; {
                    return (
                      &lt;div key={index}&gt;
                        &lt;Timeline.Item &gt;
                          &lt;Link href={value.href} title={value.title}&gt;{value.content}&lt;/Link&gt;
                        &lt;/Timeline.Item&gt;
                      &lt;/div&gt;
                    );
                  })}
                &lt;/Anchor&gt;
              &lt;/Timeline&gt;
            &lt;/div&gt;
  
          &lt;/Card&gt;
          &lt;div&gt;
            &lt;Collapse onChange={callback}&gt;
              &lt;Panel key='panel1' id='Panel1' header='This is panel header 1' &gt;
                &lt;p&gt;{text}&lt;/p&gt;
              &lt;/Panel&gt;
              &lt;Panel key='panel2' id='Panel3' header='This is panel header 2' &gt;
                &lt;p&gt;{text}&lt;/p&gt;
              &lt;/Panel&gt;
              &lt;Panel key='panel3' id='Panel4' header='This is panel header 3'&gt;
                &lt;p&gt;{text}&lt;/p&gt;
              &lt;/Panel&gt;
            &lt;/Collapse&gt;,
          &lt;div style={{ height: '500px' }}&gt;Testing&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>