driverjs not keeping scroll position in Vuetify v-dialog

I have a Vue 2 project where I’m using both Vuetify and Driver.js. On one page, a v-dialog opens and I use the scrollable attribute. Since the dialog content is very long, it becomes scrollable. Inside the same dialog, I need to highlight certain areas with Driver.js. However, some of these areas are located far down in the content and are only visible after scrolling.

When defining the Driver steps, I use a for loop to dynamically generate them. I create an object like the one below, push it into an array, and then set the steps with setSteps:

let obj = {
  element: item.element ?? null,
  popover: {
    title: item.title ?? '',
    description: item.description ?? '',
    side: 'left',
    align: 'start',
  },
  onHighlightStarted: (element) => {
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
      container: 'nearest'
    });
  },
}

When I reach the elements inside the dialog that require highlighting and need scrolling, the dialog scrolls correctly but then immediately scrolls back to the top on its own. What is the reason for this?

Even when I set smoothScroll: true, I face the same issue.

If I wrap the scrollIntoView function in a setTimeout, the highlighted area appears in the wrong position.

Reminder: Before opening the dialog, the different elements are also shown on the page. After a certain action, the dialog opens and the steps continue from there.