how to scroll to exact item after scrolling stop in react?

I make a simple demo of carousel. I am showing three cards at one time (two full cards and one small portion). When I click next and previous button it behave the same always by showing three cards except when user react to end there I am showing only two cards. This functionality is working fine, but I am facing one issue.

The issue is when I scroll I want snipped my item. I have items like blue,red,green,yellow,blue.

Issue.when I scroll 5px or 10px it will snipped in other words if we scroll blue after stop scrolling scroll it should be show red,green,yellow.

Input If I scroll this part .

Expected output it should scroll to next slide

here is my code https://codesandbox.io/s/youthful-greider-3k0md?file=/src/App.js

const onscroll = (e) => {
    const ratio = Math.round(
      parent.current.scrollLeft / slide.current.offsetWidth
    );
    console.log(ratio, "ratio");

    const newIndex = ratio >= 1 ? ratio : 0;
    setxx(newIndex);
    setIndex(newIndex - 1);
  };

any update .?