Scroll snap skips elements in Chrome using mouse wheel

Question

Trying to implement vertical scroll snap in a React component. While using mouse wheel on Chrome, it skips from 1st to 3rd element, 3rd to 5th, and so on. I am only looking to implement behavior in an individual component and not entire body or html. Below is what I have tried:

    import React, { useState } from 'react';
import styles from '../slider/LeagueSlider.module.scss';

function LeagueSlider(props) {

  const [activeLeague, setActiveLeague] = useState('0');

  const selectLeagueHandler = (id, link, ruleDoc) => {
    setActiveLeague(id);
    props.setSearchLeague(ruleDoc);
    props.setSearchLeagueLink(link);
  }

  return (
    <div className={styles.sliderHolder}>
      <div className={styles.slider}>
        {props.leagues.map((league) => {
          return (    
            <div className={styles.card} key={league.id} onClick={() => selectLeagueHandler(league.id, league.link, league.ruleDocId)}>
              <img className={activeLeague === league.id ? `${styles.active}` : ''} src={require(`../../images/league-logos/${league.image}`)}></img>
            </div>
          )
        })}
      </div>
    </div>
  )
}

SCSS file:

    .sliderHolder {
  height: 100px;

  .slider {
    height: 100px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;

    .card {
      height: 100px;
      scroll-snap-align: start;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        height: 90%;
        width: auto;

        &.active {
          border: 1px solid var(--shadowColor-color);
          box-shadow: 1px 1px 1px 1px var(--accent-color);
        }
      }
    }
  }
}

Any help would be appreciated.

*** SOLVED *** After some research I moved the scroll-snap-type to the parent container. Below is the revised css. Please note that I have yet test it on any browser other than Chrome. I'll update if I found issues with any other browser.

Hope this helps someone!

    .sliderHolder {
  height: 100px;
  scroll-snap-type: y mandatory;
  -webkit-scroll-snap-type: y mandatory;
  -ms-scroll-snap-type: y mandatory;

  .slider {
    height: 100px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* scroll-snap-type: y mandatory;
    -webkit-scroll-snap-type: y mandatory;
    -ms-scroll-snap-type: y mandatory; */

    .card {
      height: 100px;
      scroll-snap-align: start;
      scroll-snap-type: normal;
      scroll-snap-stop: always;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        height: 90%;
        width: auto;

        &.active {
          border: 1px solid var(--shadowColor-color);
          box-shadow: 1px 1px 1px 1px var(--accent-color);
        }
      }
    }
  }
}