Reactjs 如何通过 Material Ui 设计将 Accordion 添加到您的 React 项目中

我正试图通过用户界面设计在我的Reaction项目中实现Accordian，但一些如何扩展手风琴功能的方法似乎并不奏效.当我try 实现它时，我在浏览器上得到以下错误

./src/Components/About.js 找不到模块:无法在‘/Users/arundhati/Development/code/Mod5/capstone/client/src/components’中解析‘@MUI/ICONS-MATERIAL/EXPANDMORE’

About.js

import { useContext } from "react";
import { Cont } from "../Cont";
import "./stylingfolder/Intro.css";


import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';


function About(){
    const {user}=useContext(Cont)
    return(
        <>
        <h1 className="welcome">Welcome {user.name} ????</h1>
        <div>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2a-content"
          id="panel2a-header"
        >
          <Typography>Accordion 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion disabled>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel3a-content"
          id="panel3a-header"
        >
          <Typography>Disabled Accordion</Typography>
        </AccordionSummary>
      </Accordion>
    </div>
        </>
    )
}
export default About;