Height issue in React Slick Slider

Question

Hi all,

I am using React slick slider in my spfx react webpart. how to fix this below issue, i want to have same height for all the slides.

.HomeSlides {
background-color: #5c2e91;
color: #fff;
text-align: center;
//padding: 10px;
height: auto !important;
min-height: 100px;
padding: 5px;
//max-height: 300px;
//width:300px;
width: 95%;
float: left;
//border-spacing: 10px;
//display: table-cell;
//border: 10px solid #fff;
border-radius: 10px;
white-space: normal;
//box-sizing: border-box;
//margin: 6px;
// height: inherit !important;
//display: flex !important;
// justify-content: center;
align-items: stretch;
}

const renderSlides = () =>
this.state.Slides.map(item => (
<>
<div className={styles.HomeSlides} tabIndex={0} onClick={() => { this.openLink(item.LinkURL ? item.LinkURL : ""); }} style={{ background: this.props.TileColor }}>
{/* <div> */}
<p style={{ color: this.props.TitleFontColor != undefined ? this.props.TitleFontColor : "#fff" }}><h3>{item.Title}</h3></p>
<p style={{ color: this.props.DescriptionFontColor != undefined ? this.props.DescriptionFontColor : "#fff" }}>{item.Description}</p>
{/* </div> */}
</div>
</>
));

 

return (
<div>
<Slider
{...settings}
>
{renderSlides()}
</Slider>
</div>
);