Ionic 6 & Vue 3 | Ion-Modal scrollIntoView() Hides Fixed Header Issue - ionic-framework

Question

I created scrollTo functionality by clicking on an icon in a sidebar.
The scrolling works but the ion-header is moved out of view when scrolling to the desired location.
Here is a video of the behavior I am describing:
https://drive.google.com/file/d/1XeCr0RKOlas_9PpZZTUx5pEteA8Np42-/view?usp=sharing
Almost identical template works with Ionic 4 & Angular
Any ideas on what is wrong here?
Template
<template>
<ion-modal>
<ion-header>
<ion-toolbar>
// Close modal button
</ion-toolbar>
<ion-searchbar />
<div>
// Vertical column of scroll to anchor tags
<a #click="scrollTo('Math')">
<ion-icon :icon="calculator"/>
</a>
</div>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header id="Math">
<ion-label>
Math
</ion-label>
</ion-list-header>
</ion-list>
</ion-content>
</ion-modal>
</template>
scrollTo Function
function scrollTo (category: string) {
let elementId = category.replace(' ', '')
let subject = document.getElementById(elementId)
if (subject) {
subject.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
}