How to add a new CSS class to a rendered JSX element when the component is unmounting

Question

In this component the div's been successfully entered the DOM with an animation. Now I want to implement an animation when I remove them from the DOM - but it not working. The idea is to add another class to the JSX elements, when it removed - but this add doesnt work for me. Any help will be appreciated. Here is my code:

import React, {Component} from 'react';
import PropTypes from 'prop-types';

import classes from './BurgerIngredient.css';

class BurgerIngredient extends Component {

  state={
      meat: <div className={classes.Meat}></div>,
      cheese: <div className={classes.Cheese}></div>,
      bacon: <div className={classes.Bacon}></div>,
      salad: <div className={classes.Salad}></div>
  }

  componentWillUnmount(){
//HERE I'M TRYING TO ADD '.removeBaconMeat' CLASS FOR THE 'MEAT' DIV, BUT IT'S NOW WORKING.
//THE GOAL WAS TO ADD'.removeBaconMeat' CLASS TO THE DIV SO IT WILL ADD ANOTHER ANIMATION WHEN THIS COMPONENT ( = DIV ELEMENT) IS UNMOUNTING (=REMOVED FROM DOM)
      if(this.props.type === 'meat'){
         const removedMeat = {...this.state.meat};
         removedMeat.props.className = removedMeat.props.className + ' ' + classes.removeBaconMeat;
         this.setState({meat: removedMeat});
      }
  }


  render(){
    let ingredient = null;
    switch(this.props.type){
        case ('bread-bottom'):
            ingredient = <div className={classes.BreadBottom}></div>;
            break;
        case ('bread-top'):
            ingredient = (
                <div className={classes.BreadTop}>
                    <div className={classes.Seeds1}></div>
                    <div className={classes.Seeds2}></div>
                </div>
            );
            break;
        case('meat'):
            ingredient = this.state.meat;
            break;
        case('cheese'):
            ingredient = this.state.cheese;
            break;
        case('bacon'):
            ingredient = this.state.bacon;
            break;
        case('salad'):
            ingredient = this.state.salad;
            break;
        default:
            ingredient = null;    
    }
    
    return ingredient;
    }
};

BurgerIngredient.propTypes = {
    type: PropTypes.string.isRequired
}

export default BurgerIngredient;