ReactCSSTransitionGroup animation not working?

Question

React

Why is the animation not working?

import React, { Component } from "react";
import style from "./productItem.module.css";
import ProductModal from "../productModal/productModal";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";

class ProductItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      openModal: false
    };
  }

  getProductById = idProduct => {
    return this.props.productsList.find(product => product.id === idProduct);
  };

  openModal = () => {
    this.setState({
      openModal: !this.state.openModal
    });
  };

  render() {
    const productData = this.props.productData;

    return (
      <div>
        <div
          data-product={productData.id}
          onClick={this.openModal}
          className={style.item_box}
        >
          <a href="#" className={style.item}>
            <div className={style.img_box}>
              <div className={style.img}>
                <img src={productData.img} alt={productData.img} />
              </div>
            </div>
            <div className={style.title_box}>
              <div className={style.align_m}>
                <span className={style.title}>{productData.title}</span>
              </div>
            </div>
            <div className={style.backing} />
          </a>
        </div>
        <ReactCSSTransitionGroup
            transitionName="example"
            transitionAppear={true}
            transitionAppearTimeout={700}
            transitionEnterTimeout={500}
            transitionLeave={true}
            transitionLeaveTimeout={800}
          >
        {this.state.openModal ? (
        
            <ProductModal
              productId={productData.id}
              isModalOpened={this.state.openModal}
              handleModal={this.openModal}
              productsList={this.props.productsList}
              getProductById={this.getProductById}
              key={productData.id}
           />
          ):null}
          </ReactCSSTransitionGroup>
        
      </div>
    );
  }
}

export default ProductItem;

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

ProductModal - a component with a modal window
ProductItem - a component for rendering a product
When you click on a block with a product, a modal window appears. I want to make an animation for a modal window