GridListTile with Scrollbar

I'm using the Material-UI to make the grid UI in my React application. Two things i need to apply - It should show 6 movies when the home page loads the first time, and there should be a scroll bar to scroll the movies horizontally.

I don't know how to apply scroll bar behaviour on GridListTile property.

GridListTile, which has Cols set to 6, shows more than 6 movies when it should show only 6 movies. What should I do to correct this?

     return (
        <div className="home-container">
            <Header />
            <div className="heading">
                Upcoming Movies
            </div>
            <div className="img-container">
                {
                    <Grid container>
                        {
                            poster ? poster.map((movie) => (
                                <GridListTile key={movie.id} cellHeight={250} cols={6}>
                                    <img src={movie.poster_url} />
                                    <GridListTileBar title={movie.title}>
                                    </GridListTileBar>
                                </GridListTile >
                            ))
                                : "Loading..."
                        }
                    </Grid>
                }
            </div>
        </div >
    )
}