Scroll to center of element after it is done expanding

I have multiple expansion panel elements (using mudblazor) that I want to scroll to automatically (using js) after it is done expanding. Currently, since it tries to scroll before and during the expansion, the viewer ends up all over the viewport. I'd like to perfectly center the element after it is expanded - programmatically. I've tried things like adding the expanding class first and setting a timeout, but the former still uses the unexpanded bounds and the latter is very janky.

  function scrollIntoView(elementId) {
          
            let elem = document.getElementById(elementId);
            if (elem) {             
                elem.id = "tmp"
                window.location.hash = elementId;
                elem.id = elementId
                 elem.scrollIntoView({
                        behavior: 'auto',
                        block: 'center',
                        inline: 'center'
                    });
        }