Why the smoothScrolling function didn't work?

Question

I followed a tutor video to create a smooth scrolling slider (vertical), the codes are below. But the scrolling doesn't work. I do not understand which part of codes has problem and how to fix it.

I was hoping when scrolling, images move smoothly towards the top of the screen. I tried to replace scrollable.style.transform = translate3d(0, ${-current}px, 0); with translateY(-${current}px), but it didn't change anything.

I'm new to JS. Could you help me to solve this problem? Thank you very much.

Code Snippet

const scrollable = document.querySelector('.scrollable');

let current = 0;
let target = 0;
let ease = 0.075;

// Linear interpolation used for smooth
function lerp(start, end, t) {
    return start * (1 - t) + end * t;
}

function init() {
    document.body.style.height = `${scrollable.getBoundingClientRect().height}px`;
}

function smoothScroll() {
    target = window.scrollY;
    current = lerp(current, target, ease);
    scrollable.style.transform = `translate3d(0, ${-current}px, 0)`;
    requestAnimationFrame(smoothScroll)
}

init()

smoothScroll()

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  overscroll-behavior: none;
  background: black;
  height: 100vh;
  width: 100%;
}

main {
  position: fixed;
  width: 100%;
  height: 100vh;
}

.slider {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  will-change: transform;
}

.container {
  height: 100%;
}

.image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  position: absolute;
  left: 55%;
  top: 60%;
  z-index: 5;
  color: azure;
}

.img {
  position: absolute;
  height: 60%;
}

<main>
    <div class="scrollable">
        <div class="container">
            <div class="image-container">
                <h1>TEMPLE</h1>
                <img src="https://picsum.photos/id/1/300/200" alt="">
            </div>
            <div class="image-container">
                <h1>STREET</h1>
                <img src="https://picsum.photos/id/2/300/200" alt="">
            </div>
            <div class="image-container">
                <h1>RESTAURANT</h1>
                <img src="https://picsum.photos/id/3/300/200" alt="">
            </div>
            <div class="image-container">
                <h1>OSAKA</h1>
                <img src="https://picsum.photos/id/4/300/200" alt="">
            </div>
            <div class="image-container">
                <h1>DAY TIME</h1>
                <img src="https://picsum.photos/id/5/300/200" alt="">
            </div>
            <div class="image-container">
                <h1>CANAL</h1>
                <img src="https://picsum.photos/id/6/300/200" alt="">
            </div>
        </div>
    </div>
</main>

<script src="./js/osaka.js"></script>