Переключение ClassList не работает в React. Что я делаю неправильно?

Question

Я пытаюсь заставить изображение колеса вращаться (CSS-трансформация + переход) при нажатии. Прямо сейчас я могу заставить его вращаться только при удерживании кнопки мыши с помощью «img: active». Я искал ответы и в целом понял, что мне нужно просто использовать onClick для включения и выключения класса с анимацией, но, похоже, я делаю это неправильно. Что я делаю неправильно? Вот мой код для справки:

class Wheel extends React.Component
{
  constructor(props){
    super(props);

    this.spin = this.spin.bind(this);
  }

  spin(e){
    e.classList.toggle('rotate');

  }
  render(){

    return (<div><img width="400" height="400" src="https://orig00.deviantart.net/0a38/f/2010/242/f/6/singapore_wheel_of_fortune_by_wheelgenius-d2xmb9v.jpg" onClick={this.spin}/>
</div>);

  }
}

ReactDOM.render(
  <Wheel/>,
  document.getElementsByClassName('container-fluid')[0]
);

CSS:

.rotate {
-webkit-transform: rotate(1095deg);
-webkit-transition: -webkit-transform 3s ease-out;
}

/* 
img:active {
    -webkit-transform: rotate(1095deg);
    -webkit-transition: -webkit-transform 3s ease-out;
}
*/

Я поместил все на CodePen в https://codepen.io/ejpg/pen/LmOVoR

Заранее спасибо.

Answer 1

должно быть

e.target.classList.toggle('rotate');