React Carousel - images with different widths display wrong - css

Question

I have an array of URLs that I am passing in as a prop to a slide component. Only one URL is passed at a time using a stateful index. Whenever the right button is clicked, the index is incremented by 1 and vice versa for the left. This is working to display the next URL in the array; however, the images seem to repeat even though I set no-repeat on the background. This is due to the images being different widths and some being smaller than the last. I've tried setting the parent container to a set width so that the slide class is 100% the width of the parent but this doesn't seem to be working for me. Below are the two components that I'm using and the styles file.
//Parent carousel component
const HeroImage = ({state}) => {
const [index, setIndex] = useState(0);
var imgUrls = [];
const goToPrevSlide = () => {
setIndex(index - 1);
}
const goToNextSlide = () => {
setIndex(index + 1);
}
return(
<React.Fragment>
<StyledHeroImage>
<div className="slider-wrapper">
{state.heroImage.map(image => {
imgUrls.push(`${IMAGE_BASE_URL}${BACKDROP_SIZE}${image.backdrop_path}`);
})}
<Slide title={state.heroImage.original_title} text={state.heroImage.overview} image={imgUrls[index]}/>
</div>
<LeftArrow goToPrevSlide={goToPrevSlide}/>
<RightArrow goToNextSlide={goToNextSlide}/>
</StyledHeroImage>
</React.Fragment>
)
}
//child Slide Component
const Slide = ({image, text, title}) => {
const styles = {
background: `linear-gradient(to bottom, rgba(0,0,0,0) 39%, rgba(0,0,0,0) 41%, rgba(0,0,0,0.65) 100%), url(${image})`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
}
return(
<div className="slide" style={styles}>
<div className="heroimage-content">
<div className="heroimage-text">
<h1>{title}</h1>
<p>{text}</p>
</div>
</div>
</div>
)
}
//Styles file
export const StyledHeroImage = styled.div`
height: 650px;
width: 100%;
margin: 0 auto;
.slider-wrapper{
height: 100%;
width: 100%;
}
.slide{
width: 100%;
height: 100%;
}
.arrow{
height: 50px;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #f9f9f9;
border-radius: 50%;
cursor: pointer;
transition: transform ease-in .1s;
}
.nextArrow {
position: absolute;
top: 50%;
right: 25px;
z-index: 999;
color: #fff;
}
.backArrow {
position: absolute;
top: 50%;
left: 25px;
z-index: 999;
color: #fff;
}
.fa-arrow-right:before, .fa-arrow-left:before {
color: #222
}
`;