how can i convert this vanilla js code to reacts

Question

please i need some tip on how to convert the following vanilla js to react. i have been able to convert the html part successfully, but i will need some tip on the react part. any tip will appreciated. Thanks

JavaScripts Code

import iootz2 from '../images/ioootz-2.jpg'
import vriootz from '../images/vr-iootz.jpg'
import ioootz3 from '../images/ioootz-3.jpg'


const HorizoSlider = () => {

    let active = false;
    let scrollerMiddle = document.querySelector('.scroller-middle');
    let scrollerTop = document.querySelector('.scroller-top');

    scrollerMiddle.addEventListener('mousedown',function(){
    active = "middle";
    scrollerMiddle.classList.add('scrolling');
    });
    document.body.addEventListener('mouseup',function(){
    active = false;
    scrollerMiddle.classList.remove('scrolling');
    });
    document.body.addEventListener('mouseleave',function(){
    active = false;
    scrollerMiddle.classList.remove('scrolling');
    });
    scrollerTop.addEventListener('mousedown',function(){
        active = "top";
        scrollerTop.classList.add('scrolling');
    });
    document.body.addEventListener('mouseup',function(){
    active = false;
    scrollerTop.classList.remove('scrolling');
    });
    document.body.addEventListener('mouseleave',function(){
    active = false;
    scrollerTop.classList.remove('scrolling');
    });
    document.body.addEventListener('mousemove',function(e){
    if (!active) return;
    let x = e.pageX;
    x -= document.querySelector('.wrapper').getBoundingClientRect().left;
    scrollIt(x);
    });

    function scrollIt(x){
    let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth)));
    if (active==="middle"){
        document.querySelector('.middle').style.width = transform+"px";
        scrollerMiddle.style.left = transform-25+"px";
        if (scrollerTop.getBoundingClientRect().left>scrollerMiddle.getBoundingClientRect().left-5){
        document.querySelector('.top').style.width = transform-5+"px";
        scrollerTop.style.left = transform-30+"px";
        }
    }
    if (active==="top"){
        document.querySelector('.top').style.width = transform+"px";
        scrollerTop.style.left = transform-25+"px";
        if (scrollerTop.getBoundingClientRect().left>scrollerMiddle.getBoundingClientRect().left-5){
        document.querySelector('.middle').style.width = transform+5+"px";
        scrollerMiddle.style.left = transform-20+"px";
        }
    }
    }
    active = "middle";
    scrollIt(460);
    active = "top";
    scrollIt(230);
    active = false;
    scrollerMiddle.addEventListener('touchstart',function(){
        active = "middle";
        scrollerMiddle.classList.add('scrolling');
    });
    document.body.addEventListener('touchend',function(){
        active = false;
        scrollerMiddle.classList.remove('scrolling');
    });
    document.body.addEventListener('touchcancel',function(){
        active = false;
        scrollerMiddle.classList.remove('scrolling');
    });

    scrollerTop.addEventListener('touchstart',function(){
        active = "top";
        scrollerTop.classList.add('scrolling');
    });
    document.body.addEventListener('touchend',function(){
        active = false;
        scrollerTop.classList.remove('scrolling');
    });
    document.body.addEventListener('touchcancel',function(){
        active = false;
        scrollerTop.classList.remove('scrolling');
    });

    document.querySelector('.wrapper').addEventListener('touchmove',function(e){
        if (!active) return;
        e.preventDefault();
        let x = e.touches[0].pageX;
        x -= document.querySelector('.wrapper').getBoundingClientRect().left;
        scrollIt(x);
});

return (
    <div>
<section className="2-section">
        <div id="page">
     <div className="wrapper">
                <div className="bottom">
                    <img className="ioootz-2" src={iootz2} draggable="false" alt="main-images"/>
                </div>
                <div className="middle">
                    <img className="vr-iootz" src={vriootz} draggable="false" alt="vr-iootz"/>
                </div>
                <div className="scroller scroller-middle">
                    <div className="scroller scroller-top">
                            <svg
                                className="scroller__thumb"
                                xmlns="http://www.w3.org/2000/svg"
                                width="100"
                                height="100"
                                viewBox="0 0 100 100"
                            >
                                <polygon points="0 50 37 68 37 32 0 50" fill="rgb(24,24,62)" />
                                <polygon points="100 50 64 32 64 68 100 50" fill="rgb(24,24,62)" />
                            </svg>
                        </div>
                </div>
                <div className="top">
                    <img className="ioootz" src={ioootz3} draggable="false" alt="ioootz"/>
                </div>
                <div className="scroller scroller-top">
                            <svg
                                className="scroller__thumb"
                                xmlns="http://www.w3.org/2000/svg"
                                width="100"
                                height="100"
                                viewBox="0 0 100 100"
                            >
                                <polygon points="0 50 37 68 37 32 0 50" fill="rgb(24,24,62)" />
                                <polygon points="100 50 64 32 64 68 100 50" fill="rgb(24,24,62)" />
                            </svg>
                        </div>
            </div>

        </div>

</section>
    </div>

CSS CODE

.wrapper{
    width: 600px;
    height: 338px;
    max-height:100vh;
    position: absolute;
    left:1200px;
    top:290px;
    transform:translate3d(-50%,-50%,0);
    overflow:hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  
  
  /* Our image information */

  .bottom,
  .middle,
  .top {
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-color: white;
    background-size: cover;
    background-position: center;
    position: absolute;
    top:0;
    left:0;
    pointer-events:none;
    overflow: hidden;
    }
    img {
      height:100%;
    }
  
  
  .bottom{
    background: #2196f3;
  }
  .middle {
    background:  #bbdefb;
  }
  .top{
    background:  #ffffff;
  }
  
  .top{
    width:125px;
  }
  
  .scroller{
    width: 50px;
    height:50px;
    position: absolute;
    left:100px;
    top:50%;
    transform:translateY(-50%);
    border-radius:50%;
    background-color: #fff;
    opacity:0.9;
    transition: opacity 0.12s ease-in-out;
    pointer-events:auto;
    cursor: pointer;
    box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
  }
  .scroller-middle{
    margin-top:25px;
  }
  .scroller-top{
    margin-top:-25px;
  }
  
  
  .scroller:hover{
    opacity:1;
  }
  
  .scrolling{
    pointer-events:none;
    opacity:1;
    z-index: 1;
  }
  
  .scroller__thumb{
    width:100%;
    height:100%;
    border-radius:50%;
    padding: 7px;
  }
  
  .scroller:before,
  .scroller:after{
    content:" ";
    display: block;
    width: 7px;
    height: 9999px;
    position: absolute;
    left: 50%;
    margin-left: -3.5px;
    z-index: 30;
    transition:0.1s;
    box-shadow: 3.5px 0px 7px rgba(100, 100, 100, 0.2);
  }
  .scroller:before{
    top:49px;
  }
  .scroller:after{
    bottom:49px;
  }
  
  /* If you want to cahnge the colors, make sure you change the fill in the svgs to match */
  
  .scroller-middle>.scroller__thumb{
    border: 5px solid rgb(24,24,62);
  }
  .scroller-middle:before,
  .scroller-middle:after{
    background: rgb(24,24,62);
  }
  
  .scroller-top>.scroller__thumb{
    border: 5px solid rgb(24,24,62);
  }
  .scroller-top:before,
  .scroller-top:after{
    background: rgb(24,24,62);
}

the above code works, but just distorted at the end. any tip will be appreciated