useStateの無限ループのエラー解消法について

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

export function ProfileCard() {
  const [expanded, setExpanded] = useState(false);

  const plusButton = useCallback(() => {
    setExpanded(() => !expanded);
  }, []);

      <CardActions disableSpacing>
        <IconButton
          onClick={plusButton}
          className={clsx(classes.expand, expanded && classes.expandOpen)}
          aria-label="plus"
          aria-expanded={expanded}
        >
          <ExpandMoreIcon />
        </IconButton>
      </CardActions>

      <Collapse in={expanded} timeout="auto" unmountOnExit>
        <CardContent>  
          ...
        </CardContent>
      </Collapse>

import { useCallback, useState } from "react";
import { CardItem } from "./CardItem";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    margin: "16px",
    maxWidth: 445,
  },

  media: {
    height: 0,
    paddingTop: "50%",
  },
  expand: {
    transform: "rotate(0deg)",
    marginLeft: "auto",
    transition: theme.transitions.create("transform", {
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  expandOpen: {
    transform: "rotate(180deg)",
  },
}));

export function ProfileCard() {
  const classes = useStyles();
  const [expanded, setExpanded] = useState(false);
  const photos = ["kyoto.jpg", "nagasaki.jpg", "niigata.jpg"];

  const plusButton = useCallback(() => {
    setExpanded(() => !expanded);
  }, []);

  return (
    <>
      <Grid container>
        {photos.map((photo) => {
          return (
            <Grid item xs key={photo}>
              <CardItem
                classes={classes}
                plusButton={plusButton()}
                expanded={expanded}
                photo={photo}
              />
            </Grid>
          );
        })}
      </Grid>
    </>
  );
}

import clsx from "clsx";
import {
  Card,
  CardHeader,
  CardMedia,
  CardContent,
  CardActions,
  Collapse,
  Avatar,
  IconButton,
  Typography,
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";


export function CardItem({classes,plusButton,expanded,photo}){
  return (
    <Card className={classes.root}>
      <CardHeader
        className={classes.avatar}
        title="タイトル"
        subheader="サブタイトル"
      />
      <CardMedia className={classes.media} image={photo} />
      <CardContent>
        <Typography
          variant="inherit"
          color="textSecondary"
          display="inline"
          component="p"
        >
          Kiyomizu 
        </Typography>
      </CardContent>
      <CardActions disableSpacing>
        <IconButton
          onClick={plusButton}
          className={clsx(classes.expand, expanded && classes.expandOpen)}
          aria-label="plus"
          aria-expanded={expanded}
        >
          <ExpandMoreIcon />
        </IconButton>
      </CardActions>
      <Collapse in={expanded} timeout="auto" unmountOnExit>
        <CardContent>
          <Typography paragraph variant="h6" align="center">
            content
          </Typography>
          <Typography color="textSecondary">
            Kiyomizu 
          </Typography>
        </CardContent>
      </Collapse>
    </Card>
 );
}