how to make variables inside useEffect accessible from outside?

can i access the isroll variable which is inside useEffect? I want to run scroll when the button is pressed. but in my case it doesn't work. i have tried by doing setState and it's working but i got a new problem on iscroll.on() which says "Cannot read properties of undefined" i don't know how to solve this problem. is there someone who can help me?

function Arrangement() {
  const ref = useRef(null);

  const [prevButton, setPrevButton] = useState(false);
  const [nextButton, setNextButton] = useState(true);

  useEffect(() => {
    const iscroll = new IScroll(ref.current, { // how to export this variable?
      keyBindings: true,
      scrollX: true,
      mouseWheel: true,
      click: true
    });

    iscroll.on("scrollEnd", () => {
      if (iscroll.x === 0) {
        setPrevButton(false);
      } else {
        setPrevButton(true);
      }

      if (iscroll.x === iscroll.maxScrollX) {
        setNextButton(false);
      } else  {
        setNextButton(true);
      }
    });

    return () => {
      iscroll.destroy();
    }
  }, []);

  const onPrevButtonHandler = () => {
    iscroll.scrollBy(220, 0, 600); // not working
  }

  const onNextButtonHandler = () => {
    iscroll.scrollBy(-220, 0, 600); // not working
  }

  return (
    <div className={classes.Container}>
      <button className={clsx(classes.Button, classes.ButtonLeft, {
        [classes.Button__active]: prevButton
      })} onClick={onPrevButtonHandler} type="button" aria-label="Prev button">
        <ChevronLeft />
      </button>
      <div className={classes.Wrapper} ref={ref}>
        <ul>
          <li></li>
        </ul>
      </div>
      <button className={clsx(classes.Button, classes.ButtonRight, {
        [classes.Button__active]: nextButton
      })} onClick={onNextButtonHandler} type="button" aria-label="Next button">
        <ChevronRight />
      </button>
    </div>
  );
}

export default Arrangement;

I am open to any suggestions given.