Не умею подключать Js к Jsx

если что там в коде очень много ненужного html'ля, но я его оставил, потому что может быть он важный, так что не пугайтесь

У меня есть div который grid и мне нужно к нему добавить drag to scroll, но проблема в том, что после запуска страницы npm start у меня ничего не грузит, а в консоли есть несколько ошибок

DragToScroll.js:6 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at Object../src/container/Review/DragToScroll.js (DragToScroll.js:6:1)
at Object.options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:61:1)
at Module../src/container/Review/Review.jsx (DragToScroll.js:27:1)
at Module.options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:61:1)
at Module../src/container/index.js (Review.jsx:182:1)
at Module.options.factory (react refresh:6:1)

Забавный факт, как не переписывай и не используй разный код для такого ошибки остаются одинаковыми

 import React from 'react'
import images from '../../constants/images';
import './Review.css';
import '../../constants/DragToScroll.js'; // вот тут я добавляю новый файл Js в котором есть этот код

const Review = () => {

return(
    <div className='app__review'>
        <div className='Reviews'>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
        </div>
      </div>
      <div className='Arrowsix'>
        <img src={images.arrowsix} alt="Arrow six" />
      </div>
    </div>

      )
}

export default Review

код который я использую в качестве решения для scroll, он находится в файле DragToScroll.js, который я подключил

const slider = document.querySelector('.Reviews');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 3; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
  console.log(walk);
});

я пробывал вместить этот код в сам файл JSX :

import React from 'react'
import images from '../../constants/images';
import './Review.css';

const Review = () => {

  const slider = document.querySelector('.Reviews');
  let isDown = false;
  let startX;
  let scrollLeft;
  
  slider.addEventListener('mousedown', (e) => {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
  });
  slider.addEventListener('mouseleave', () => {
    isDown = false;
    slider.classList.remove('active');
  });
  slider.addEventListener('mouseup', () => {
    isDown = false;
    slider.classList.remove('active');
  });
  slider.addEventListener('mousemove', (e) => {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 3; //scroll-fast
    slider.scrollLeft = scrollLeft - walk;
    console.log(walk);
  });

return(
    <div className='app__review'>
      <div className='app__review-content'>
        <div className='topbar'>
          <p className='topbar-createreview'>Написати відгук</p>
          <p className='topbar-reviewsign'>Відгуки</p>
          <img src={images.starrate} alt="Star rate" />
          <p className='topbar-rate'>4</p>
        </div>
        <div className='Reviews'>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
          <div className='review'>
            <div className='ReviewContent'>
              <div className='NamePositionCompanyAndStars'>
                <div className='NameAndPosition'>
                <p className='Name'>Олександр</p>
                <div className='Position'>
                  <p className='PositionSign'>Co-CEO</p>
                  <p className='OfSign'>of</p>
                  <p className='NameOfCompany'>Feed Motion ADS</p>
                </div>
                </div>
                <div className='Stars'>
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                  <img src={images.starrate} alt="" />
                </div>
              </div>
              <p className='UserReview'>Були проведені чудові роботи. Налаштували оптимізували та підказали</p>
            </div>
          </div>
        </div>
      </div>
      <div className='Arrowsix'>
        <img src={images.arrowsix} alt="Arrow six" />
      </div>
    </div>

      )
}

export default Review

но ошибка та же самая, я подозреваю, что код рабочий, это я просто такой, который не может правильно его подключить

вот ошибки для другого Js кода того же назначения:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at Object../src/constants/DragToScroll.js (DragToScroll.js:8:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/container/Review/Review.jsx (Price.jsx:83:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/container/index.js (Review.jsx:182:1)
    at Module.options.factory (react refresh:6:1)

я вот тут кое что заметил, код ниже частичная хрень(как я думаю), но смысл в том, что я всё ещё не могу его нормально подключить к React App

const childern = document.querySelectorAll(".childern");
const parent = document.querySelector(".container");

let startX;
let scrollTop;
let isDown;

parent.addEventListener("mousedown", (e) => mouseIsDown(e));
parent.addEventListener("mouseup", (e) => mouseUp(e));
parent.addEventListener("mouseleave", (e) => mouseLeave(e));
parent.addEventListener("mousemove", (e) => mouseMove(e));

function mouseIsDown(e) {
  isDown = true;
  startY = e.pageY - parent.offsetTop;
  scrollTop = parent.scrollTop;
}
function mouseUp(e) {
  isDown = false;
}
function mouseLeave(e) {
  isDown = false;
}
function mouseMove(e) {
  if (isDown) {
    e.preventDefault();
    //Move vertcally
    const y = e.pageY - parent.offsetTop;
    const walkY = (y - startY) * 5;
    parent.scrollTop = scrollTop - walkY;
  }
}

и может быть поможет иерархия папок

папка constants index.js:

import images from './image.js';
import dragToScroll from './DragToScroll';

export{
    dragToScroll,
    images
};