MUI Accordian & AccordionSummary events

I'm using React material-ui. Using the below code panel is expanding only when the expand icon is clicked. When I click other than expand icon the panel is not expanding.

What I would like to achieve here is, The panel should expand only expand icon is clicked & If a user click other place apart from expand icon the panel should not get open & I need to add some logic in that case based on my requirement.

  export default function App() {
  const [expanded, setExpanded] = useState(false);
  const toggleAccordion = (event) => {
    console.log(event);
    setExpanded((prev) => !prev);
  };

  return (
    <div className="App">
      <Accordion expanded={expanded}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon onClick={toggleAccordion} />}
          aria-controls="panel1a-content"
        >
          <Typography
            noWrap
            sx={{
              width: "100px"
            }}
          >
            Test
          </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>
    </div>
  );
}

I tried adding onChange into Accordion component like below. But in this case AccordionSummary onclick & Accordion onChange is both getting triggerd.

<Accordion expanded={ expanded } onChange = {newFunctionality}>
    --
    --
 </Accordion>

const newFunctionality = (event) => {
  console.log(event)
}

Is there anyway to achieve two action like below

1. Expanding the panel once click expand icon. ( this is working fine)
2. Clicking somewhere in the panel apart from expand icon. Should not expand the panel. I'm expecting a function call to be triggered.

CodeSandbox link: https://codesandbox.io/s/adoring-stonebraker-89o8vb?file=/src/App.js