I have an accordion like structure but for tabs in a menu.

Each tab has an arrow which moves up and down depending on whether the tab is expanded or condensed.

My code:

export default class Tab extends Component<TabProps> {
    tabRef: any;
    arrowRef: any;
    clickFunction: any;

    constructor(props: any) {
        super(props);
        this.tabRef = React.createRef();
        this.arrowRef = React.createRef();
        this.clickFunction = this.expand.bind(this);
    }

    expand() {
        this.arrowRef.current.style.animation = '0.3s rotateArrowDown ease-in-out forwards';
        this.clickFunction = this.condense.bind(this);
    }

    condense() {
        this.arrowRef.current.style.animation = '0.3s rotateArrowUp ease-in-out forwards';
        this.clickFunction = this.expand.bind(this);
    }


    render() {
        const num = this.props.num;
        const desc = this.props.desc;
        const parts = this.props.parts;

        var subTabs = [];
        for(let i = 1; i <= parts.length; i++) {
            subTabs.push(<a className="sub-tab" href={parts[i - 1].link}>
                <span className="sub-tab-desc">{parts[i - 1].desc}</span>
            </a>)
        }

        return (
            <div className="menu-tab" ref={this.tabRef} onClick={this.clickFunction}>
                <div className="tab-title">
                    <div className="tab-arrow" ref={this.arrowRef}></div>
                    <div className="tab-num">{num}</div>
                    <div className="tab-desc">{desc}</div>
                </div>
                <div className="sub-tabs">
                    {subTabs}
                </div>
            </div>
        );
    }
};

But this does not work.

Is there a way to do this?