Preserve Scrolling not working on scrollable elements

Hello everyone I'm using Inertia with Vue js. I want to preserve scroll on my Scrollable element. I'm also using Scroll regions https://inertiajs.com/scroll-management#scroll-regions

but element scrolling is still starting from the top.

here my code AsideMenuLayer.vue

			<div
    			:class="styleStore.darkMode ? 'aside-scrollbars-[slate]' : styleStore.asideScrollbarsStyle"
   				 class="flex-1 overflow-y-auto"
    			scroll-region
  				>
    				<AsideMenuList
      					@menu-click="menuClick"
    				/>
  			</div>

AsideMenuList.vue

	<template>
		<ul>
			<li>
    			<NavLink :href="route('dashboard')" :active="route().current('dashboard')">
        			Dashboard
    			</NavLink>
		</li>
		<li>
    		<NavLink :href="route('alphabet-overprint-type-location.index')" :active="route().current('alphabet-overprint-type-location.index')">
        	Alphabet Overprint Type & Location
    		</NavLink>
		</li>
		<li>
    		<NavLink :href="route('back-bank-stamp.index')" :active="route().current('back-bank-stamp.index')">
        		Back Bank Stamps
    		</NavLink>
		</li>
	</ul>
</template>

NavLink.vue

		<template>
			<div v-if="props.active">
    			<Link :href="href" :class="classes" preserve-scroll >
        			<slot />
    			</Link>
			</div>
			<div v-else>
    			<Link :href="href" :class="classes" preserve-scroll >
        			<slot />
    			</Link>
			</div>
		</template>

here is the page's screenshot. I just want to preserve scroll of my AsideMenu https://prnt.sc/-TCx5lTxJryY