리액트로 가로 마우스휠 스크롤이벤트

리액트에서 가로스크롤 마우스휠로 스크롤하는걸 구현하고 싶은데 어떻게 해야되나요

구글링해서 찾아본것들을 적용하면 자꾸 화면이 안보이거나 오류가 뜨는데 어떻게 할까요..ㅠㅠㅠ

제가 대충 긁어 모았던것들도 첨부해 보겠습니다,. 이걸 어찌 적용해야될지모르겟습니당

 useEffect(() => {
    document.addEventListener('scroll', (e) => {
      console.log(e);
      const horizontal = e.target.scrollingElement.scrollLeft;
      const vertical = e.target.scrollingElement.scrollTop;

      e.target.scrollingElement.scrollLeft = vertical
      console.log(horizontal, vertical)
    });
  }, [])
  container.addEventListener('wheel', (ev) => {
    ev.preventDefault();  // stop scrolling in another direction
    // console.log(ev.deltaY);
    container.scrollLeft += (ev.deltaY + ev.deltaX);
    // console.log('Wheel Move: '+ container.scrollLeft);
  });
 
  // horizontal scrolling with arrow keys
 
  document.addEventListener('keydown', function(event) {
    if (event.code == 'ArrowRight') {
      container.style.scrollBehavior = 'smooth';
      container.scrollLeft += 500;
      container.style.scrollBehavior = null;
      }
      if (event.code == 'ArrowLeft') {
        container.style.scrollBehavior = 'smooth';
        container.scrollLeft -= 500;
        container.style.scrollBehavior = null;
      }
  });
 
  // scroll progress
 
  container.addEventListener('scroll', handleScroll);
 
  function handleScroll() {
      let winScroll = container.scrollLeft || container.documentElement.scrollLeft;
      let width = container.scrollWidth - container.clientWidth;
      let scrolled = (winScroll / width) * 100;
 
      document.getElementById("progressBar").style.width = scrolled + "%";
  }