Images Don't Render On Next 13.1.6 - next.js

Question

I try using flowbite carousel with next app. Before the page become interactive, the image has a hidden class. After page become interactive, a JavaScript file removes the hidden class and makes slider work. The problem is when JavaScript loads, and slider start sliding, the image become: (Rendered size: 0 × 0 px) and doesn't renders!
Here's The Carousel Code:
`import Image from "next/image";
export default function Slider() {
return (
<div id="default-carousel" className="relative" data-carousel="slide">
{/* Carousel wrapper */}
<div className="relative h-56 overflow-hidden rounded-lg md:h-96">
{/* Item 1 */}
<div className="hidden duration-700 ease-in-out" data-carousel-item>
<span className="absolute text-2xl font-semibold text-white -translate-x-1/2 - translate-y-1/2 top-1/2 left-1/2 sm:text-3xl dark:text-gray-800">
First Slide
</span>
<Image
src={"/assets/slide1.jpg"}
className="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-contain"
alt="..."
fill
/>
</div>
);
}
Removed unnecessary parts of code here.
Chrome Dev Tools:
Screenshot of error
I've tried fill property, giving static width and height. None of them worked.