How to avoid initial lag after input using Material UI - reactjs

Question

Context
I have a carousel of MUI cards for a website that I'm building that is a box using a stack as it's underlying component. A problem that's come up is that whenever I try to scroll, there's at least a 4 second lag before seeing any new render. I tried
cropping down the images
compressing them
converting to .webp's
moving the logic into one place instead of passing props
Thouhgts
Memoizing the component works as a band-aid after the initial lag and
it scrolls as it should after but I'm assuming that's not the correct way
to do this.
(Idea) After looking back into the docs for an alternative I figured
virtualizing the list might work as well
Would probably be easier to just write them out by hand
Cut off a lot of the unnecessary bits
Index.tsx snippet mapping through data
<Box
component={Stack}
direction="row"
spacing={5}
>
{carouselData.map((item: CarouselProps) => (
<CreativeCarousel
src={item.src}
/>
))}
</Box>
Carousel Component
//Consistent typing for properties
export type CarouselProps = {
src: StaticImageData;
};
const CreativeCarousel = (props: CarouselProps) => {
return (
<Card sx={{ maxWidth: 300, minWidth: 300, height: "100%" }}>
<CardMedia component="img" height="75" image={props.src.src} />
</Card>
);
};
export default CreativeCarousel;

Answer 1

Troubleshooting
The lag went away after removing the <CardMedia /> so my guess is that rerendering full-res images for every frame of scrolling isn't the most optimal move.
Solution
But replacing the underlying component from the standard html img to an optimized Next.js Image most definitely was. I was under the impression that I needed to pass a component as a property or else I'd need to use an img like what was used in the example. I only found out later that I could also pass react nodes as children in the API page.
const Carousel = () => {
return carouselData.map((item) => (
<Card
key={item.heading}
sx={{ maxWidth: 300, minWidth: 300, height: "100%", mx: 4 }}
>
<CardMedia sx={{ width: "100%", height: "auto" }}>
<Image
alt={item.heading}
src={item.src}
layout="responsive"
/>
</CardMedia>
</Card>
));
};
export default Carousel;