Why does my Layout of the carousel render vertically while flexed? - reactjs

Question

I have an carousel set up for view of store products.
Here you can test the code out here in the demo snippet Codesandbox
Mapping through my array of images it renders vertically on the screen when they should over lap each other given the view of a carousel to click from left to right. The container is relative to its position, flexed with 0 inset. I don't understand how the images render vertically
export default function Storetwo(){
const [currentSlide, setCurrentSlide] = useState(0);
const [currentProduct, setCurrentProduct] = useState(slides[0]);
const { handleSubmit, reset, setValue, control } = useForm({ defaultValues });
const [data, setData] = useState(null);
const onSubmit = data => console.log(data);
const handlePreviousClick = () => {
setCurrentSlide(currentSlide === 0 ? slides.length - 1 : currentSlide - 1);
setCurrentProduct(slides[currentSlide]);
}
const handleNextClick = () => {
setCurrentSlide(currentSlide === slides.length - 1 ? 0 : currentSlide + 1);
setCurrentProduct(slides[currentSlide]);
}
return(
<div className=' md:flex p-2 h-[100vh] '>
{/* image container */}
<div className=" w-[100%] md:w-[100%] ">
{slides.map((slide, index) => (
<div key={index} className={`relative flex inset-0 z-10 justify-center items-center ${index === currentSlide ? 'block' : 'hidden'}`}>
<Image src={slide.image} width={200} height={200} key={index} alt="" className="object-cover p-10 " />
<div className=" top-40 left-10 justify-center items-center mx-auto flex ">
<button className='text-3xl ' onClick={handlePreviousClick}><ArrowBackIosIcon/></button>
<button className='text-3xl ' onClick={handleNextClick}><ArrowForwardIosIcon /></button>
</div>
</div>
))}
</div>
.../
Here are the vertical rendering images

Answer 1

Your link is broken, which is one of the reasons why external live examples aren't recommended on StackOverflow. Use Snippets instead.
As for your question, I believe you're misunderstanding how flexbox works (or maybe it's just an oversight).
You're applying flex to the divs that are being rendered as a result of your mapping, when you should be adding it to their container instead. It's the container that will set its children position as flexbox. Read more here.
[...]
return(
<div className=' md:flex p-2 h-[100vh] '>
{/* image container */}
<div className="flex w-[100%] md:w-[100%] "> {/* <= here */}
{slides.map((slide, index) => (
<div key={index} className={`relative flex inset-0 z-10 justify-center items-center ${index === currentSlide ? 'block' : 'hidden'}`}>
<Image src={slide.image} width={200} height={200} key={index} alt="" className="object-cover p-10 " />
<div className=" top-40 left-10 justify-center items-center mx-auto flex ">
<button className='text-3xl ' onClick={handlePreviousClick}><ArrowBackIosIcon/></button>
<button className='text-3xl ' onClick={handleNextClick}><ArrowForwardIosIcon /></button>
</div>
</div>
))}
</div>