Scroll snapping doesn't work well with mouse. Using mouse, the page gets scrolled abruptly

Question

I am using full section scrolling using scroll snapping. If I scroll through touchpad, it is smooth. But if I use mouse and make the scroll wheel scroll just a bit, then it scrolls with jerk/speed.

I have searched through various stack overflow posts related to this but it did not help. They told to use scroll-behavior: smooth; for solving the mouse scroll with jerk. But none of the solutions worked. Can anyone help me to solve this problem. Also I tried to do it using pure js but it was getting problematic one or the other way.

Here is the codepen link of the same code:
https://codepen.io/Utsav-Raithatha/pen/RwXzMyy

.scroll-container {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  height: 100vh;
  overflow-y: scroll;
  scrollbar-width: none;
}

.scroll-area {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: red;
}

.scroll-container,
.scroll-area {
  margin: 0 auto;
}

.scroll-area:nth-child(1) {
  background-color: red;
}

.scroll-area:nth-child(2) {
  background-color: blue;
}

.scroll-area:nth-child(3) {
  background-color: green;
}

.scroll-area:nth-child(4) {
  background-color: black;
}

<div class="scroll-container">
  <div class="scroll-area">1</div>
  <div class="scroll-area">2</div>
  <div class="scroll-area">3</div>
  <div class="scroll-area">4</div>
</div>

I tried using scroll-behavior: smooth; but it did not work and same problem was occurring.