Why is the event bubbling?

Question

JavaScript

There is such a component (everything that is not relevant to the question has been removed from it):

class PortfolioSectionPanel extends React.Component {

    constructor() {
        super();

        this.state = {
            showWorks: false,
        }

        this.showWorks = (e) => {
            e.stopPropagation();
            this.setState({
                showWorks: !this.state.showWorks,
            })
        }
    
    render() {
                               
        return(

            <div className='portfolio-panel' id='porfolioPanel' ref={this.props.link}>
                <div className='portfolio-panel-background' ref={this.props.linkCircle} onTransitionEnd={(e) => {this.showWorks(e); console.log(1)}} >
                    <ReactCSSTransitionGroup
                        transitionName='portfolio-panel__information'
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={500}>
                            {middleElementCircle}
                    </ReactCSSTransitionGroup>
                    <div style={diskStyle} className='portfolio-panel-disk' id='portfolio-panel-disk'>
                        <ReactCSSTransitionGroup
                        transitionName='work-item'
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={500}>
                            {workItems}
                        </ReactCSSTransitionGroup>
                    </div>
                </div>
            </div>
        )
    }
}
    

export default PortfolioSectionPanel;

Why is the event bubbling even though I cancel it in the function?
In this part of the code, an ascent occurs and the showWorks function works a bunch of times, because the showWorks flag in the component state is responsible for calling the same animation, as a result, the flag is interrupted all the time, because ReactCSSTransitionGroup also causes animation. It turns out that when the animation in the block ended, in this block (className='portfolio-panel-background'), showWork became true, but there are still ReactCSSTransitionGroups inside, apparently the event pops up, and when the ReactCSSTransitionGroup fires, the showWorks function is called again and sets the flag to false, and so on endlessly
How to solve the problem?

Answer 1

If you do not want showWorks to be called, then you need to cancel the ascent not in it, but below. Hook another onTransitionEnd handler to the ReactCSSTransitionGroup whose events you don't want to process.