Реагирующий (функциональный) компонент анимации на основе смены реквизита

Question

Я новичок в React и не понимаю, как думать о анимациях и управлять ими. У меня есть функциональный компонент, который получает свойство pieceType.

• Я хочу использовать анимацию A при монтировании,
• и, если pieceType изменяется, я хочу использовать анимацию B для перехода с pieceType=1 на pieceType=2 ,
• и анимация C для изменения другого пути.

Я пытался использовать React Transition Group и Framer Motion, но ни один из них не предоставляет решения для указания места. анимация при изменении props, что заставляет меня задуматься, правильно ли я думаю об этом - вместо функционального компонента мне следует использовать класс? Не представляется правильным хранить входящие props как state переменные, так как изменение состояния вызовет повторную визуализацию, верно? Если я храню произвольные переменные (не state) в экземпляре моего класса, то в какое время в жизненном цикле нужно их обновить, и могу ли я рассчитывать на это?

Ниже приведен некоторый абстрактный код:

function Circle(props) {
  return (
    <div className={ `circle ${props.pieceType}` }>
    </div>
  );
}

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pieceType: null
    }
  }

  render() {
    const content = this.state.pieceType ?
                    <Circle pieceType={this.state.pieceType}/> :
                    null;
    return (
      <div className="square" onClick={this.props.onClick}>
        { content }
      </div>
    )
  }
}

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      size: 8,
      squares : Array(8**2).fill(null),
      isPlayer1: true
    }
  }

  handleClick(i) {
    let squares = this.state.squares.slice();
    squares[i] = this.state.isPlayer1 ? 1 : 2;
    this.setState( {
      squares: squares,
      isPlayer1: !this.state.isPlayer1
    });
  }

  render() {
    let style = {"--gridSize" : this.state.size};
    let cells = [];
    for(let i=0; i<(this.state.size**2); i++) {
      cells.push(
        <Square onClick={ ()=>this.handleClick(i) }/>
      )
    }
    return (
      <div className="board" style={style}>
        {cells}
      </div>
    )
  }
}


ReactDOM.render(
  <Board/>,
  document.getElementById("root")
);

Извиняюсь, если это немного запутано (это запутано в моей голове) - любые указания на абстрактную структуру и то, как об этом думать, будут с благодарностью! Я хочу избежать простого подхода css class, так как я хотел бы управлять всеми анимациями в одном месте (монтаж, демонтаж и переход на место) -> [править] из моего понимания Отключить монтирование может быть сложно с подходом css имя-класса, поскольку компонент удаляется до запуска анимации.