PopperJS Popover position is not right

Question

I'm using PopperJS for a menu and it doesn't position the popover right for nested menus.

This is the first level popover that is triggered with clicking on the three dots:

And this is the second level popover that is triggered with clicking on the Parent Menu Item on the above screenshot.

The data-kt-menu-placement is set to right for the second popover, and it does seem to initialize for a horizontal positioning. But it doesn't position next to it's parent, it decides on something I've yet to figure out, and continues from there. (this data-kt is a part of the theme I'm using, which is Metronic check here)

This is the entire menu:

<div class="row w-100 p-3">
  <div class="btn btn-icon btn-light cursor-pointer symbol" data-kt-menu-trigger="click" data-kt-menu-attach="parent"
    data-kt-menu-placement="bottom-start" data-kt-menu-flip="right">
    <img src="/assets/three-dots.svg" style="max-height: 24px;">
  </div>

  <div data-kt-menu="true">
    <div class="menu-item px-5 bg-primary" 
      data-kt-menu-trigger="click" 
      data-kt-menu-placement="right"
      data-kt-menu-flip="top" 
      attr.data-kt-menu-attach="parent"
    >
      <a class="menu-link cursor-pointer" href="javascript:void(0)">
        <span class="menu-text">
          Parent Menu Item
        </span>
        <span class="menu-arrow"></span>
      </a>

      <div class="menu-sub menu-sub-dropdown py-4" routerLinkActive="menu-active-bg">
        <div class="btn-icon menu-item px-3">
          <a class="menu-link" [href]="foo">
            Sub Menu Item
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

And the dropdown initialization is done like below:

private _getItemOption = (item: HTMLElement, name: string) => {

    let value = null
    if (item && item.hasAttribute('data-kt-menu-' + name)) {
      const attr = item.getAttribute('data-kt-menu-' + name) || ''
      value = getAttributeValueByBreakpoint(attr)
      if (value !== null && String(value) === 'true') {
        value = true
      } else if (value !== null && String(value) === 'false') {
        value = false
      }
    }
    return value
  }

private initDropdownPopper = (item: HTMLElement, sub: HTMLElement) => {

    let reference
    const attach = this._getItemOption(item, 'attach') as string

    if (attach) {
      if (attach === 'parent') {
        reference = item.parentNode
      } else {
        reference = document.querySelector(attach)
      }
    } else {
      reference = item
    }

    if (reference) {
      let popper = createPopper(
        reference as Element | VirtualElement,
        sub,
        this._getDropdownPopperConfig(item)
      )
    }
  }

What might be the issue here? I tried updating the popover after creation, but it only moves the container that contains Sub Menu Item menu items a few pixels to the right.