Popper.js arrow position does not change when changes its placement

Question

I have implemented popper.js within a small project, but I have a small project with the arrow that goes to the reference element, because when you change the placement of the popup for example from bottom to top, the position of the arrow does not change, I attach my initialization code and some images where the problem is shown I hope you can help me, thanks.

<div id="${num_transaccion}" class="d-none popup">
<div class="arrow"></div>
<div class="container-body">
<table class="table table-popover">
<thead>
  <tr>
      <th>#Folio Programado</th>
      <th>#Grupo</th>
  </tr>
</thead>
<tbody>
  <tr>
      <td>#Folio Programado</td>
      <td>#Grupo</td>
  </tr>
 </tbody>
</table>
</div>
</div>

I'm using datatables jquery plugin for the table wrapped to a div which has horizontal scrolling, this is my popper.js code initialization:

var num_trans = $(this).data("num-transaction");

let reference = $(this);
let popup = $(num_trans);
new Popper(reference, popup, {
  placement: "top",
  modifiers: {
    keepTogether: { enabled: false },
    arrow: {
        enabled: true,
        element: '.arrow'
     }
  }
});

My css code for popup:

.arrow {
  width: 12px;
  height: 12px;
  display: block;
  position: absolute;

}

.popup[x-placement="bottom"] .arrow {
  margin-top: -10px;
  border-bottom: 10px solid #D0D3D8;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.popup[x-placement="top"] .arrow {
  margin-top: -10px; /* This must be change I think */
  border-top: 10px solid #D0D3D8;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.popup {
    max-width: 80%;
    width: 100%;
    padding: 10px;
}

Some images of the problem, when placement of popper.js changes to top, the arrow does not change its position: