Animation repeating in ReactCSSTransitionGroup?

Question

css

I made components fade in with ReactCSSTransitionGroup but the animation appears twice for some reason

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import WorkItem from '../WorkItem';

class PortfolioSectionPanel extends React.Component {

    constructor() {
        super();

        this.state = {
            showWorks: false,
            works: [
                {
                    type: 'Some',
                    link: 'some',
                },
                {
                    type: 'Some1',
                    link: 'some1',
                },
                {
                    type: 'Some',
                    link: 'some',
                },
                {
                    type: 'Some1',
                    link: 'some1',
                },
                {
                    type: 'Some',
                    link: 'some',
                },
                {
                    type: 'Some',
                    link: 'some',
                },
            ]
        }

        this.showWorks = () => {
            this.setState({
                showWorks: !this.state.showWorks,
            })

            console.log(1)
        }

    }
    
    render() {

        let workItems;

        if(this.state.showWorks) {
            let {works} = this.state;

            const angleRad = 360 / works.length * 0.017; //Частота кругов в радианах
            const bg = document.getElementById('portfolio-panel-disk');
            let radius;
            if(bg) {
                radius = parseInt(getComputedStyle(bg).width) / 2;
                console.log(radius)
            }

            workItems = works.map((currentValue, index) => {
                return <WorkItem 
                        type={currentValue.type} 
                        link={currentValue.type} 
                        key={index} 
                        leftOffset={radius - radius * Math.cos(angleRad * index)}
                        topOffset={radius - radius * Math.sin(angleRad * index)}  />
            })
        } else {
            workItems = null;
        }
   
        return(

            <div className={this.props.freshClass}>
                <div className={this.props.classForBg} onTransitionEnd={this.showWorks} >
                    <div className='portfolio-panel-disk' id='portfolio-panel-disk'>
                        <ReactCSSTransitionGroup
                        transitionName='work-item'
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={500}>
                            {workItems}
                        </ReactCSSTransitionGroup>
                    </div>
                </div>
            </div>
        )
    }
}
    

export default PortfolioSectionPanel;

Here is the css code I am using (less)

.work-item {
    width: 300px;
    height: 300px;
    background-color: blue;
    transform:translate(-50%, -50%);
    position: absolute;
    border-radius: 50%;

    &-enter {
        opacity: 0;
        transition: .5s;
    }

    &-enter-active {
        opacity: 1;
    }

    &-leave {
        opacity: 1;
        transition: .5s;
    }

    &-leave-active {
        opacity: 0;
    }
}

It turns out this:
What could be the problem?