Why are all the dropdowns of cards happening at the same time? - reactjs

Question

I am using Material UI in a React app.
I have implemented cards with expandable dropdowns; click a card, get more info.
I want to implement multiple cards, separately expandable. Currently when I click the down arrow (to expand) on one card all cards expand.
I can't figure out what's going wrong. Here is my code.
const ExpandMore = styled((props) => {
const { expand, ...other } = props;
return <IconButton {...other} />;
})(({ theme, expand }) => ({
transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
}));
function Blogs(){
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<>
<Grid container direction="row" justifyContent="center">
<Grid item xs={4}>
<Box m={6}>
<Card sx={{ maxWidth: 345 }}>
<CardHeader
title="It’s a cocktail o’clock."
subheader="May 14, 2021"
/>
<CardMedia
component="img"
height="194"
image="https://img.freepik.com/free-photo/selection-various-cocktails-table_140725-2909.jpg?w=2000"
alt="Paella dish"
/>
<CardContent>
<Typography variant="body1" color="text.secondary">
Beat The Heat With Chilled Cocktails At The Best Bars In New York.
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>To a foodie, summer means one thing and one thing only – DRINKS!</Typography>
<Typography paragraph>
Yes people, we know it’s hot out there and the only way to quench your thirst is by guzzling down a bunch of ice-cold cocktails
</Typography>
<Typography paragraph>
<h4>1.The Bar Room at The Beekman</h4>
Visit the beautiful Bar Room in the historic Beekman Hotel for high-key romance that really wows.
Do try the whiskey sour.One of the best drinks available.
<h4>2.Dublin House</h4>
You can never go wrong with Sláinte! Margarita,Pot O'Gold, & Irish Old Fashioned
<h4>3.Russian Samovar</h4>
Alpensahne,Amarula Cream Liqueur, Caribou,Feni
</Typography>
</CardContent>
</Collapse>
</Card>
</Box>
</Grid>
<Grid item xs={4}>
<Box m={6}>
<Card sx={{ maxWidth: 345 }}>
<CardHeader
title="Winner Winner Pizza Dinner"
subheader="May 14, 2021"
/>
<CardMedia
component="img"
height="194"
image="https://cdn.shopify.com/s/files/1/0624/9853/articles/20220211142645-margherita-9920.jpg?crop=center&height=800&v=1660843558&width=800"
alt="Paella dish"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
Beat The Heat With Chilled Cocktails At The Best Bars In New York.
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>To a foodie, summer means one thing and one thing only – DRINKS!</Typography>
<Typography paragraph>
Yes people, we know it’s hot out there and the only way to quench your thirst is by guzzling down a bunch of ice-cold cocktails
</Typography>
<Typography paragraph>
<h4>1.The Bar Room at The Beekman</h4>
Visit the beautiful Bar Room in the historic Beekman Hotel for high-key romance that really wows.
Do try the whiskey sour.One of the best drinks available.
<h4>2.Dublin House</h4>
You can never go wrong with Sláinte! Margarita,Pot O'Gold, & Irish Old Fashioned
<h4>3.Russian Samovar</h4>
Alpensahne,Amarula Cream Liqueur, Caribou,Feni
</Typography>
</CardContent>
</Collapse>
</Card>
</Box>
</Grid>
</Grid>
</>
);
}