我的目标是创建一个自定义的Material UI Accordion，它应该看起来像这样：

现在，我尝试使用这些代码结构创建这个自定义MUI accordion （这个 accordion 还使用一些自定义搜索框功能和自定义 accordion 数据）
accordion 源码：

import * as React from "react";
import { useState } from "react";
import AccordionMUI 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";
import "./globals.css";
import { accordionData } from "./accordionData.js";
import AddCircleIcon from "@mui/icons-material/AddCircle";
import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";

export default function SimpleAccordion() {
  const [search, setSearch] = useState("");
  return (
    <div>
      <input
        onChange={(e) => setSearch(e.target.value)}
        type="text"
        placeholder="Search"
      />

      {accordionData
        .filter((item) => {
          return search.toLowerCase() === ""
            ? item
            : item.sectionTitle.toLowerCase().includes(search);
        })
        .map((item) => (
          <AccordionMUI key={item.id} className="accordionMui">
            <AccordionSummary
              expandIcon={<AddCircleIcon sx={{ color: "#384558" }} />}
              aria-controls="panel1a-content"
              id="panel1a-header"
            >
              <Typography>
                <b>{item.sectionTitle}</b>
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography>{item.sectionContent}</Typography>
            </AccordionDetails>
          </AccordionMUI>
        ))}
    </div>
  );
}

CSS样式化源代码：

.accordionMui {
  background-color: rgba(242, 242, 242, 0.1);
  box-shadow: none;
  color: #384558;
}

#panel1a-header {
  padding-top: 5%;
  padding-bottom: 5%;
}

完整的工作演示在这里CodeSandbox。
它目前看起来像这样：

我的问题是，我的 accordion 的最后一条分隔线没有显示出来，不像它以前的部分，下面有一条分隔线。我还想覆盖 accordion 分隔线的样式，使其更粗。
我还想将折叠图标更改为它们各自的状态（未展开的 accordion 将显示AddCircleIcon，展开的 accordion 将显示RemoveCircleIcon），但当我使用这个三元条件expanded={expanded === 'panel1'}时，出现了一个问题，显示Cannot find name 'expanded'，就像这个堆栈接受的问题（How to change icon when accordion summary is expanded?）一样。因此，我不知道如何改变折叠图标的基础上，从他们的状态正在扩大或尚未扩大。
我仍然很困惑，不确定我应该在Accordion API of MUI上使用哪些类，这将是很大的帮助，以获得一些指导，在适当的自定义和覆盖 accordion 组件从MUI，因为我仍然在学习MUI的道路上。
你的回答确实会对我有很大的帮助。非常感谢。