Wrong shepherd modal placement within Angular Material Dialogs

[atinary-ndefago]

Hello,

I am having an issue using Angular Material Dialogs:

As you can see the Shepherd modal is not attached to the highlighted button

Here's the step code:

      attachTo: {
          element: '#start-campaign',
          on: 'right',
      },

This is the only element in my page with this id (start-campaign):

I am using "angular-shepherd": "^17.0.0", I also tried to override the shepherd.js version to the latest ("shepherd.js": "^11.2.0",) but that did not help

The weird thing is, it works for all the other Material Dialogs I am using

As of now, I fixed it using a custom classes in my step and with a margin-top: 80px

Just wanted to let you know, if you have any idea of how I could fix this or why this is happening ? that would be much appreciated!
thank you!