Hi i am trying to create an image slider that can slide with a next/prev button. I also have an array of data that will be map through. So this is my code.

import React,{useState, useEffect} from 'react'

import { ThirdContainer, SecondContainer, ButtonLeft, ButtonRight, ButtonTitle, Container, FirstRow, FirstTitle, SecondRow, SecondTitle, TitleContainer } from './FirstSectionStyled'

const FirstSection = ({bgData}) => {

 //functions
 const nextSLide = () =>{}
 const prevSlide = () =>{}

    return (
        <Container>
            <ButtonLeft onClick={prevSLide}/>
                <SecondContainer id="scroller">
                    {bgData.map((data,index) => (
                        <ThirdContainer key={data.id} backgroundImg = {data.backgroundImg}>
                            <FirstRow>
                                <TitleContainer>
                                    <FirstTitle>{data.firstTitle}</FirstTitle>
                                    <SecondTitle>{data.secondTitle}</SecondTitle>
                                    <ButtonTitle>Buy Now</ButtonTitle>
                                </TitleContainer>
                            </FirstRow>
                            <SecondRow>
                            </SecondRow>
                        </ThirdContainer>
                    ))
                    }
                </SecondContainer> 
            <ButtonRight onClick={nextSLide} />
        </Container>
    )
}

export default FirstSection

And this is the styled component

export const SecondContainer = styled.div`
    height:100%;
    width: 100vw;
    overflow-x: auto;
    background: black;
    display : flex;

`
export const ThirdContainer = styled.div`
    min-width: 100vw;
    display: grid;
    grid-template-rows: 70% 30%;
    background-image: linear-gradient(to bottom, rgb(21, 21, 21, 0.5), rgb(21, 21, 21, 0.2), rgb(21, 21, 21, 0.2), rgb(21, 21, 21, 0.4)), 
                      url(${(props) => (props.backgroundImg)});
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
`

The problem is How can I make the SecondContainer to scroll its x-axis by 100vw everytime the button is clicked so that it will show the next ThirdContainer and create the image slider effect. I also want to make it animate smoothly. So any idea to solve this? Thank u!