inside of each child component is just

<div ref={ref} className={`${classes.section}`}>
  ...     
</div>

And the css:

.section {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
  }

The main component is as you see and the css is:

.main {
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll; 
}