I currently have two Material UI expandable cards and everything works as expected minus the fact that both cards expand at the same time.

My config file looks like:

module.exports = {
  featuredSection: [
    {
      id: 1,
      name: 'beer-image-1',
      title: 'Mango Cart',
      description:
        'A light Wheat Ale bursting with lots of fresh mango flavor and aroma, finishing crisp and refreshing.',
      malt: '2-row, Wheat',
      hops: 'Bravo',
      notes:
        'Light, refreshing Wheat Ale with lots of fresh Mango flavor and aroma.',
    },
    {
      id: 2,
      name: 'hero-image',
      title: 'test',
      description:
        'A light Wheat Ale bursting with lots of fresh mango flavor and aroma, finishing crisp and refreshing.',
      malt: 'test',
      hops: 'test',
      notes: 'test',
    },
  ],
};

My Featured.js component file looks like:

const Featured = ({ featuredSection }) => {
  const classes = useStyles();
  const [expanded, setExpanded] = useState(false);

  const handleExpandClick = (id) => {
    setExpanded(!expanded);
  };

  const card = featuredSection.map((item, i) => {
    return (
      <div key={item.id}>
        <CardWrapper>
          <Card className={classes.root}>
            <CardMedia
              className={classes.media}
              image={require(`../images/${item.name}.jpg`).default}
              title={item.title}
            />
            <CardContent>
              ...
            </CardContent>
            <CardActions disableSpacing>
              <IconButton
                style={{ color: '#f5f5f5' }}
                className={clsx(classes.expand, {
                  [classes.expandOpen]: expanded,
                })}
                onClick={(id) => handleExpandClick(item.id)}
                aria-expanded={expanded}
                aria-label='show more'>
                <ExpandMoreIcon />
              </IconButton>
            </CardActions>
            <Collapse in={expanded} timeout='auto' unmountOnExit>
              ...
            </Collapse>
          </Card>
        </CardWrapper>
      </div>
    );
  });
  return <>{card}</>;
};
export default Featured;

I'm assuming there's something I need to change with the State or match up certain values like the config file's object ID but I'm not exactly sure what needs to be done to be able to open each card individually. I recreated the issue here.