How to enlarge a carousel MUI card on hover - reactjs

Question

I'm creating a Carousel similar to Netflix's, where if you hover over a card, it will enlarge it and show more details.
My problem is that, instead of enlarging just the hovered card, it's enlarging all the other cards.
Here's the component:
import * as React from 'react';
import {useState} from 'react';
import Card from '#mui/material/Card';
import CardHeader from '#mui/material/CardHeader';
import CardMedia from '#mui/material/CardMedia';
import CardContent from '#mui/material/CardContent';
import CardActions from '#mui/material/CardActions';
import Avatar from '#mui/material/Avatar';
import IconButton from '#mui/material/IconButton';
import Typography from '#mui/material/Typography';
import {red} from '#mui/material/colors';
import FavoriteIcon from '#mui/icons-material/Favorite';
import ShareIcon from '#mui/icons-material/Share';
import {makeStyles} from '#mui/styles';
const ctCardHoveredSx = {
maxWidth: 345,
"&:hover": {},
"& .ct-card": {
display: "none"
},
"&:hover .ct-card": {
display: "flex"
},
"& .ct-card-panel": {
transition: "transform 0.15s ease-in-out"
},
"&:hover .ct-card-panel": {
transform: "scale3d(1.05, 1.05, 1)"
}
}
const useStyles = makeStyles({
root: {
maxWidth: 310,
transition: "transform 0.15s ease-in-out",
"& .ct-card": {
display: "none"
}
},
cardHovered: {
transform: "scale3d(1.05, 1.05, 1)",
"&:hover .ct-card": {
display: "flex"
}
}
});
const CtCard = () => {
const classes = useStyles();
const [hovered, setHovered] = useState<boolean>(false);
return (
<Card className={classes.root}
classes={{root: hovered ? classes.cardHovered : ""}}
onMouseOver={() => setHovered(true)}
onMouseOut={() => setHovered(false)}
>
<CardMedia
component="img"
height="194"
image="https://picsum.photos/200/300"
alt="Paella dish"
/>
<CardHeader
avatar={
<Avatar sx={{bgcolor: red[500]}} aria-label="recipe">
R
</Avatar>
}
title="Lorem Ipsum"
subheader="Lorem Ipsum"
/>
<CardContent className={'ct-card'}>
<Typography variant="body2" color="text.secondary">
This impressive paella is a perfect party dish and a fun meal to cook
together with your guests. Add 1 cup of frozen peas along with the mussels,
if you like.
</Typography>
</CardContent>
<CardActions disableSpacing className={'ct-card'}>
<IconButton aria-label="add to favorites">
<FavoriteIcon/>
</IconButton>
<IconButton aria-label="share">
<ShareIcon/>
</IconButton>
</CardActions>
</Card>
);
}
export default CtCard;
And how it's used:
<Stack
position={'relative'}
direction={'row'}
spacing={1}
>
{
Array(pageCount).fill(null).map((v, i) =>
<CtCard/>
)
}
</Stack>

Answer 1

Perhaps start by try giving each <CtCard/> being mapped a unique key:
{
Array(pageCount)
.fill(null)
.map((v, i) => <CtCard key={i} />);
}
The index is not a good option for key either, but use just for testing purposes and switch to some actual unique ID later.
Based on your description the events setting state do fire as expected, so it would seem that it might be the updating of the components causing the issue.