Make selected element stay at one place while scrolling the neighbouring elements in a carousel like setting

I’m trying to create a lightbox,

I have a thumbnail carousel at the bottom of the images that you click on to change the displayed image. I want to make it so that when you click on any thumbnail, it scrolls to the center of the page making it seem like the selected element remains constantly at the center of the screen.

What I’ve done till now is I’ve added a dynamic left padding to the ThumbnailViewer container.

const ThumbnailViewer = (props) => {
const {
    images = [],
    currentImage = 0,
    thumbnailWidth
} = useContext(LightboxContext);

const getThumbnailViewerPaddingLeft = () => {
    if (thumbnailWidth) {
        return `calc(95vw - ${(thumbnailWidth * (currentImage + 1))}px)`
    }

}
const getThumbnailViewerPaddingRight = () => {
    if (thumbnailWidth) {
        return `calc(95vw - ${thumbnailWidth}px)`
    }

}

return (
    <div className={styles.thumbnailViewer} style={{ paddingLeft: getThumbnailViewerPaddingLeft() }}>
        {images.map((el, i) => <ThumbnailIcon img={el.src} alt={el.alt} selected={i == currentImage} current={i} />)}
    </div>
)

}

I’m unable to get it centred as you can see in this gif below and I’m not sure if this approach is right. I’m thinking to dynamically reduce left padding and then add right padding to it constantly so that when clicking on the right most element it gets to the center too.

Can someone help me if I’m on the right path or there is a better way to do this?