[accordion] When large content is present in accordion. The active accordion is going out of viewport

Duplicates

Possible solution is suggested for V1 but nothing is there in V5
https://github.com/mui/material-ui/issues/12568

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. When large content is present in Accordion, the content is going out of viewport.
2. Example link - https://codesandbox.io/s/distracted-sanne-rre74j?file=/demo.js
3. Click on the first item to expand the accordion
4. Now scroll to bottom and click on the 2nd to expand.
5. Notice how the screen is not taken to the top of the accordion but stays at the bottom

Current behavior 😯

Screen stays at end of the expanded accordion

Expected behavior 🤔

Focus should be on top of the content on the expanded section

Context 🔦

No response

Your environment 🌎

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Start by reproducing the accordion behavior in the linked CodeSandbox and compare it with the prior issue at #12568. Expand the first item, scroll to the bottom, then expand the second; done means the expanded section's top is brought into view instead of leaving the screen at the previous bottom position.