Нужна помощь в рефакторинге кода для React. Это для 3д карусели

Question

первая публикация здесь, в stackOverflow.

Я пытаюсь добавить в свой проект функцию 3D-карусели, но у меня возникла проблема. Я не очень разбираюсь в анимации и нуждаюсь в подсказке в правильном направлении. Прежде чем кто-нибудь спросит, я погуглил, исследовал и попробовал свою задницу, чтобы выяснить это самостоятельно. Это было задумано как обучающий опыт и sh меня в моем росте, и я натолкнулся на загвоздку.

Я нашел фрагмент кода в коде, который я хотел переработать для работы в React, для использования в моем проекте. У меня есть ссылка на этот код здесь => https://codepen.io/desandro/pen/wjeBpp

Я урезал и реорганизовал код для работы в React all, кроме самой важной функции, которая фактически вращает карусель. в коде у меня сейчас закомментирована функция, с которой мне нужна помощь. Я не могу найти способ обойти querySelectorAll. Кроме того, я не вижу, как получить доступ к моему списку после того, как он уже был отрисован, поскольку у меня есть список в совершенно отдельном компоненте.

Я также помещу остальные файлы на github. https://github.com/OleDakotaJoe/animations

вот код, который я написал сейчас.

    class Carousel extends React.Component {
      constructor(props) {
            super(props)
            this.state = {
              selectedindex: 0,
              radius: Number,
              theta: Number,
              angle: Number,
              cellCount: 9,
              radius: Number
            }
       }

       decrementIndex= () => {
         this.setState({selectedindex: this.state.selectedindex -1});
      // this.changeCarousel();
       }

       incrementIndex= () => {
         this.setState({selectedindex: this.state.selectedindex + 1});
       //this.changeCarousel();
       }

       rotateCarousel= ()=> {
         this.setState({angle: this.state.theta * this.state.selectedindex * -1});
       }

       changeCarousel = () => {
         this.setState({theta : 360 / this.state.cellCount})
         let cellSize = 210;
         this.setState({radius : Math.round( ( cellSize / 2) / Math.tan( Math.PI / 
         this.state.cellCount ) )
       });

       // for ( let i=0; i < this.state.cellCount-1 /*made a change ref orig doc*/;i++ ) {
       //   let cell = cells[i];
       //   if ( i < this.state.cellCount-1/*here too*/ ) {
       //     // visible cell
       //     cell.style.opacity = 1;
       //     let cellAngle = this.state.theta * i;
       //     cell.style.transform = `rotateY(${cellAngle}deg) 
             translateZ(${this.state.radius} + 'px)`;
       //   } else {
       //     // hidden cell
       //     cell.style.opacity = 0;
       //     cell.style.transform = 'none';
       //   }
       // }
          this.rotateCarousel();
       }

       componentDidMount() {
          console.log()
       }

       render() {
          return(
            <div>
                <div className="scene">
                    <div className="carousel" style={{'transform' : `translateZ(${-this.state.radius}px)rotateY(${this.state.angle}deg)`}}>
                    <CellList cellCount={this.state.cellCount} />
                    </div>
                </div>

                <div className="carousel-options">
                        <ArrowLeft decrementIndex={this.decrementIndex}/>
                        <ArrowRight incrementIndex={this.incrementIndex} />
                </div>
            </div>
            )
          }
       }        

Это ^^^^ - главный контейнер для карусели. Я считаю, что мне нужно использовать ссылки, но я не знаю, как они будут работать в этой ситуации.

    const CellList = ({cellCount}) => {
      let list = [];
      for (let i = 0; i < cellCount; i++) {
        list.push(<CarouselCell index={i + 1} key={i+1} id={i+1}/>)
      } 
      console.log(list)        
      return(  
        <div>{list}</div>    
      )  
    } 

    export { CellList };