MUIのAccordionのopen/closeをソースコードで操作する方法

1import {
2  useState,
3  useContext,
4  useEffect,
5  useMemo,
6  useCallback,
7  useRef,
8} from "react";
9import * as React from "react";
10import Accordion from "@mui/material/Accordion";
11import AccordionActions from "@mui/material/AccordionActions";
12import AccordionSummary from "@mui/material/AccordionSummary";
13import AccordionDetails from "@mui/material/AccordionDetails";
14import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
15import Button from "@mui/material/Button";
16
17export default function App() {
18  const handlePanelChange = (openPanel) => {
19    setOpenPanel(!openPanel);
20  };
21
22  const handleClick = () => {
23    setOpenPanel(!openPanel);
24  };
25
26  const [openPanel, setOpenPanel] = useState(false);
27
28  return (
29    <div className="App" style={{ margin: 100 }}>
30      <Accordion
31        onChange={() => {
32          handlePanelChange(openPanel);
33        }}
34        expanded={openPanel}
35      >
36        <AccordionSummary
37          expandIcon={<ExpandMoreIcon />}
38        >
39          test Accordion
40        </AccordionSummary>
41        <AccordionDetails>ボタンからも開閉を操作できます</AccordionDetails>
42      </Accordion>
43
44      <Button variant="contained" onClick={handleClick} sx={{ margin: 10 }}>
45        開閉
46      </Button>
47    </div>
48  );
49}
50