Реакція / React JsДОбавить в реакт/ React js

Нужно добавить следующий скрипт в реакт 

      var doc = window.document,

        context = document.querySelector('.js-loop'),

        clones = document.querySelectorAll('.is-clone'),

        disableScroll = false,

        scrollHeight = 0,

        scrollPos = 0,

        clonesHeight = 0,

        i = 0;

      function getScrollPos () {

        return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);

      }

      function setScrollPos (pos) {

        context.scrollTop = pos;

      }

      function getClonesHeight () {

        clonesHeight = 0;

        for (i = 0; i < clones.length; i += 1) {

          clonesHeight = clonesHeight + clones[i].offsetHeight;

        }

        return clonesHeight;

      }

      function reCalc () {

        scrollPos = getScrollPos();

        scrollHeight = context.scrollHeight;

        clonesHeight = getClonesHeight();

        if (scrollPos <= 0) {

          setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling

        }

      }

      function scrollUpdate () {

        if (!disableScroll) {

          scrollPos = getScrollPos();

          if (clonesHeight + scrollPos >= scrollHeight) {

            // Scroll to the top when you’ve reached the bottom

            setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling

            disableScroll = true;

          } else if (scrollPos <= 0) {

            // Scroll to the bottom when you reach the top

            setScrollPos(scrollHeight - clonesHeight);

            disableScroll = true;

          }

        }

        if (disableScroll) {

          // Disable scroll-jumping for a short time to avoid flickering

          window.setTimeout(function () {

            disableScroll = false;

          }, 40);

        }

      }

      function init () {

        reCalc();

        context.addEventListener('scroll', function () {

          window.requestAnimationFrame(scrollUpdate);

        }, false);

        window.addEventListener('resize', function () {

          window.requestAnimationFrame(reCalc);

        }, false);

      }

      if (document.readyState !== 'loading') {

        init()

      } else {

        doc.addEventListener('DOMContentLoaded', init, false)

      }

    По итогу страница должна быть в скролиться по лупу.

import {  useState, useRef } from 'react';

import { Navbar } from './components';

import  './index.css'

import  './app.css'

import Marquee3k from 'marquee3000';

const App = () => {

  return (

    <div className=" p-5 overflow-hidden">

      <Navbar/>

     <main class="Loop js-loop">

      <div className="p-5 one " id="element"> Home Page </div>

      <div className="p-5 two min-h-screen  bg-neutral-300" > Home Page </div>

      <div className="p-5 three min-h-screen bg-neutral-400 " > Home Page </div>

      <div className="p-5 four min-h-screen bg-neutral-500 " > Home Page </div>

      <div className="p-5 three min-h-screen bg-neutral-600  "> Home Page </div>

      <div className="p-5 one is-clone " > Home Page </div>

      <div className="p-5 two is-clone  min-h-screen  bg-neutral-300" > Home Page </div>

     </main>

    </div>

  )

}

export default App;