我需要创建一个包含配方的页面，每个配方都在一个物料UI卡组件中。我的问题是每次我折叠其中一张卡时，所有的卡都会折叠。我需要防止这种情况发生。有人能解释一下我是如何做到这一点的吗？这是我目前为止的代码。
RecipeCard.jsx:

import { useState } from "react";
import { styled } from "@mui/material/styles";
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 Collapse from "@mui/material/Collapse";
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 ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import MoreVertIcon from "@mui/icons-material/MoreVert";

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,
  }),
}));

const RecipeCard = ({ id, title, subheader, image, description, recipe }) => {
  const [expanded, setExpanded] = useState(false);

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

  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardHeader
        avatar={
          <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
            R
          </Avatar>
        }
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
        title={title}
        subheader={subheader}
      />
      <CardMedia component="img" height="194" image={image} />
      <CardContent>
        <Typography variant="body2" color="text.secondary">
          {description}
        </Typography>
      </CardContent>
      <CardActions disableSpacing>
        <IconButton aria-label="add to favorites">
          <FavoriteIcon />
        </IconButton>
        <IconButton aria-label="share">
          <ShareIcon />
        </IconButton>
        <ExpandMore
          expand={expanded}
          onClick={handleExpandClick}
          aria-expanded={expanded}
          aria-label="show more"
        >
          <ExpandMoreIcon />
        </ExpandMore>
      </CardActions>
      <Collapse in={expanded} timeout="auto" unmountOnExit>
        <CardContent>
          <Typography paragraph>Method:</Typography>
          <Typography paragraph>{recipe}</Typography>
        </CardContent>
      </Collapse>
    </Card>
  );
};

export default RecipeCard;

Recipes.jsx:

import { useState } from "react";
import {
  Box,
  Card,
  CardActions,
  CardContent,
  Collapse,
  Button,
  Typography,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import RecipeCard from "../components/RecipeCard";

const Recipes = () => {
  const isNonMobile = useMediaQuery("(min-width: 1000px)");

  const cards = [
    {
      id: 1,
      title: "Recipe 1",
      subheader: "test 1",
      image: "img1",
      description: "description 1",
      recipe: "recipe 1",
    },
    {
      id: 2,
      title: "Recipe 2",
      subheader: "test 2",
      image: "img2",
      description: "description 2",
      recipe: "recipe 2",
    },
    {
      id: 3,
      title: "Recipe 3",
      subheader: "test 3",
      image: "img3",
      description: "description 3",
      recipe: "recipe 3",
    },
    {
      id: 4,
      title: "Recipe 4",
      subheader: "test 4",
      image: "img4",
      description: "description 4",
      recipe: "recipe 4",
    },
  ];

  return (
    <Box
      mt="20px"
      display="grid"
      gridTemplateColumns="repeat(4, minmax(0, 1fr))"
      justifyContent="space-between"
      rowGap="20px"
      columnGap="1.33%"
      sx={{
        "& > div": { gridColumn: isNonMobile ? undefined : "span 4" },
      }}
    >
      {cards.map((card) => (
        <RecipeCard
          key={card.id}
          id={card.id}
          title={card.title}
          subheader={card.subheader}
          image={card.image}
          description={card.description}
          recipe={card.recipe}
        />
      ))}
    </Box>
  );
};

export default Recipes;