How to implement 'Expand All' and 'Collapse All' buttons for MUI accordion group?

I'm working on a section which display logs in the form on MUI accordions. I have got the accordions working normally i.e. expand and collapse work. However, now I'm asked to add buttons Expand All and Collapse All, which when clicked will expand and collapse all of the said accordions, while still retaining the usual behavior of the accordions.

import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';

const Logs = () => {
  const cards = fetch('from-API')

  return (
    <Box>
      <Button>Expand All</Button>
      <Button>Collapse All</Button>
      {cards.length > 0 &&
        cards.map(card, (i) => {
          return (
            <Accordion key={i}>
              <AccordionSummary>
                Accordion Summary
              </AccordionSummary>
              <AccordionDetails>
                Accordion Details
              </AccordionDetails>
            </Accordion>
          );
        })}
    </Box>
  );
};

export default Logs;

Steps to get it working.

• Maintain a state array containing the index values of each of the accordions that are expanded. Set empty array [] as the initial value.
• Set onClick handler of the accordions to add the index of accordion to the array if it's not already present, and remove it if it is.
• Set expanded prop of the accordions to be truthy only if the index value of the accordion belongs to the state array.
• For the Collapse All button, just clear the state array to [], which will trigger all the accordions to collapse.
• For the Expand All button, create a new array containing index values of all the accordions and then set this new array to be the state array, which effectively means that all accordions are expanded.

import {
  Accordion,
  AccordionSummary,
  AccordionDetails,
  Box,
  Container,
  Typography,
  Button,
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { useState } from "react";

const data = [
  {
    summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
    details:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit",
  },
  {
    summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
    details:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit",
  },
  {
    summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
    details:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit",
  },
];

const App = () => {
  const [logs, setLogs] = useState(data);

  const [expandedAccordions, setExpandedAccordions] = useState([]);

  const accordionClicked = (index) => {
    if (expandedAccordions.includes(index))
      setExpandedAccordions(
        expandedAccordions.filter((number) => number !== index)
      );
    else setExpandedAccordions([...expandedAccordions, index]);
  };

  const collapseAll = () => {
    setExpandedAccordions([]);
  };

  const expandAll = () => {
    const newArray = [];
    logs.forEach((log, index) => newArray.push(index));
    setExpandedAccordions(newArray);
  };

  return (
    <Container
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: 4,
        my: 5,
        maxWidth: "700px",
      }}
    >
      <Typography variant="h4" align="center">
        Adding Expand/Collapse-All Buttons to MUI Accordions
      </Typography>
      <Box>{JSON.stringify(expandedAccordions)}</Box>
      <Box sx={{ display: "flex", gap: 3 }}>
        <Button variant="contained" onClick={expandAll}>
          Expand All
        </Button>
        <Button variant="contained" onClick={collapseAll}>
          Collapse All
        </Button>
        <Button variant="outlined" onClick={() => setLogs([...logs, logs[0]])}>
          Add item
        </Button>
        <Button
          variant="outlined"
          onClick={() => setLogs([...logs.slice(0, -1)])}
        >
          Remove item
        </Button>
      </Box>
      <Box sx={{ maxWidth: "600px" }}>
        {logs.map((log, index) => (
          <Accordion
            key={index}
            onChange={() => accordionClicked(index)}
            expanded={expandedAccordions.includes(index)}
          >
            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
              <Typography variant="h6">{log.summary}</Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography>{log.details}</Typography>
            </AccordionDetails>
          </Accordion>
        ))}
      </Box>
    </Container>
  );
};
export default App;