I'm creating a carousel component in React and I'm having trouble implementing the next, and previous functionality:

  const onClickPrevious = () => {
    const box = opstionsListRef.current.getBoundingClientRect();
    opstionsListRef.current.style.transform = `translateX(${box.x - 300}px)`;
  };

  const onClickNext = () => {
    const box = opstionsListRef.current.getBoundingClientRect();
    opstionsListRef.current.style.transform = `translateX(${box.x + 100}px)`;
  };

I had to decrement by 300 just to have a more decent translateX, but it still not working 100% correctly.