React boostrap carousel not working as expected - reactjs

Question

I am basically trying to fetch results of upcoming movies from the IMDB API into my react app, and display it as a carousel. The API is working fine, and I am getting the data as expected, but it is getting displayed one below another on my page, and not as a carousel
The code:
const UpcomingMovie = () => {
const [upcomingMovies, setUpcomingMovies] = useState([])
const fetchData = () => {
Axios.get(upcoming_movies_url).then((res) => {
setUpcomingMovies(res.data.results.slice(0, 10));
console.log(res.data.results)
}).catch(err => console.log(err))
}
useEffect(() => {
fetchData()
}, [])
return <div style={{ display: 'block', width: "90%", padding: "20px", margin: "auto" }}>
<Carousel className="carousel-upcoming" variant="dark">
{upcomingMovies.length > 0 &&
upcomingMovies.map((latmovies) => <Carousel.Item key={latmovies.id} {...latmovies} style={{ display: "flex" }}>
<img className="d-block w-100" src={"https://image.tmdb.org/t/p/w1280" + latmovies.poster_path} style={{ width: "200px", float: "right", padding:"20px" }} alt="First slide" />
<Carousel.Caption style={{ paddingLeft: "10px" }}>
<h3>{latmovies.title} ({latmovies.release_date.slice(0,4)})</h3>
<h6 style={{ margin: "0px" }}>Overview</h6>
<p style={{ fontSize: "12px", marginTop: "0px" }}>{latmovies.overview}</p>
</Carousel.Caption>
</Carousel.Item>)
}
</Carousel>
</div>
};
export default UpcomingMovie;
I am using this for my carousel. Any help is greatly appreciated!