React-material-ui-carousel not rendering full-height content on init

Question

I am using react-material-ui-carousel v3 with MUI v5. I need to render custom HTML content inside the carousel. The problem I have is that on the first render the first item does not have full height, see images below

    return (
        <Carousel autoPlay={true}>
            {items.map((item, i) => {
                const htmlContent = getHtmlContent(decodeHtml(item));
                return <div key={i}>{htmlContent}</div>;
            })}
        </Carousel>
    );

First init After moving to the second page and then to the first page

How can I adjust the height so it shows the full height of the content?