I have issue in my code. I use Leader-Line.js libraries and the Bootstrap 5 framework, as well as a scrollable modal. Modal appearing in front of page content but leader lines (while attached elements are behind the modal) are appearing in front of modal. How to avoid this issue on scrolling?

Code Snippet

// Draw a line between two elements
function drawLine(e1, e2) {
  let line = new LeaderLine(
    e1,
    e2
  );
  line.setOptions({
    startSocket: 'right',
    endSocket: 'bottom'
  });
  line.color = '#999';
  line.startPlug = 'behind';
  line.endPlug = 'behind';
  line.path = 'grid';
  line.size = 1;
  line.position();

  return line;
}

let lines = [];

const myModalEl = document.getElementById('ChartFlowModal');
myModalEl.addEventListener('shown.bs.modal', event => {
  lines.push(drawLine(document.getElementById('role-text-1.1'), document.getElementById('role-text-1.2')));
  lines.push(drawLine(document.getElementById('role-text-2.1'), document.getElementById('role-text-2.2')));
  lines.push(drawLine(document.getElementById('role-text-3.1'), document.getElementById('role-text-3.2')));
  lines.push(drawLine(document.getElementById('role-text-4.1'), document.getElementById('role-text-4.2')));

  // Start the polling loop
  repositionLines();
});

myModalEl.addEventListener('hide.bs.modal', event => {
  lines.forEach(line => line.remove());
  lines = [];
});

const bottomRight = new PlainDraggable(handle2, {
  onMove: function() {
    wrapperPosition();
    repositionLines();
  },
  onMoveStart: function() {
    lines.forEach(line => line.dash = {
      animation: true
    });
  },
  onDragEnd: function() {
    lines.forEach(line => line.dash = false);
  },
  autoScroll: {
    target: elmFrame,
    sensitivity: [16, 8, 0]
  }
});

function repositionLines() {
  lines.forEach(line => line.position());
  // Use requestAnimationFrame to continuously reposition lines
  requestAnimationFrame(repositionLines);
}

.modal-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #0d6efd;
  color: #fff;
  padding-top: 0rem;
  position: relative;
}

.modal-header .modal-top-close {
  font-size: 14px;
  margin: 10px;
  margin-right: -5px;
}

.modal-title {
  font-size: 21px;
}

.modal .modal-content {
  height: 50%;
  min-height: 400px;
}

.modal-footer {
  background-color: #eaeaea;
}

.sku-structure {
  margin-left: 60px;
}

.sku-structure ul {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px dashed #ddd;
}

.sku-structure li {
  list-style: none;
  font-size: 15px;
  font-weight: 300;
  line-height: 25px;
}

.leader-line {
  z-index: 9000;
}

<div class="container" style="width: 800px">
  <div class="modal-control my-3">
    <p>
      <a href="#" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#ChartFlowModal">open Chart
      </a>
    </p>
  </div>
  <div class="modal fade" id="ChartFlowModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <table class="sku-table" style="width: 100%; border: thin solid white;">
            <tr>
              <th style="width: 20%; text-align: center;">Contain</th>
              <th style="width: 10%; text-align: center;">Type</th>
              <th style="width: 10%; text-align: center;">Subcategory</th>
              <th style="width: 10%; text-align: center;">Socket</th>
              <th style="width: 10%; text-align: center;">Type</th>
            </tr>
            <tr style="height: 5px;">
              <td colspan='5'></td>
            </tr>
            <tr class="end-values">
              <td></td>
              <td id="role-text-1.2" style="text-align: center;">4</td>
              <td id="role-text-2.2" style="text-align: center;">01</td>
              <td id="role-text-3.2" style="text-align: center;">2011</td>
              <td id="role-text-4.2" style="text-align: center;">i7</td>
            </tr>
            <tr>
              <td colspan="5">
                <ul class="sku-structure">
                  <li class="bi bi-circle-fill">
                  <strong>Type</strong><span class="source-values">Processors</span>
                    <ul>
                      <li class="bi-square">
                        <a>Type name</a><span class="to-card">Processors</span>
                      </li>
                      <li class="bi-1-square-fill">
                        <a>Type code</a><span class="to-sku">4</span><span id="role-text-1.1"></span>
                      </li>
                    </ul>
                  </li>
                  <li class="bi bi-circle-fill pt-2">
                    <strong>Subcategory</strong><span class="source-values">GPU line</span>
                    <ul>
                      <li class="bi-square">
                        <a>Subcategory name</a><span class="to-card">GPU line</span>
                      </li>
                      <li class="bi-2-square-fill">
                        <a>Subcategory code</a><span class="to-sku">01</span><span id="role-text-2.1"></span>
                      </li>
                    </ul>
                  </li>

                  <li class="bi bi-circle-fill">
                    <strong>Socket</strong><span class="source-values">Socket type</span>
                    <ul>
                      <li class="bi-square">
                        <a>Socket serie</a><span class="to-card">LGA</span>
                      </li>
                      <li class="bi-1-square-fill"><a>Socket type</a><span class="to-sku">
                        2011</span><span id="role-text-3.1"></span>
                      </li>
                    </ul>
                  </li>
                  <li class="bi bi-circle-fill pt-2">
                    <strong>PC CPU</strong><span class="source-values">Server CPU</span>
                    <ul>
                      <li class="bi-square">
                        <a>Brand name</a><span class="to-card">Intel</span>
                      </li>
                      <li class="bi bi-2-square-fill">
                        <a>Type</a><span class="to-sku">i7</span><span id="role-text-4.1"></span>
                      </li>
                    </ul>
                  </li>
                </ul>
              </td>
            </tr>
          </table>
        </div>
        <div class="modal-footer" style="z-index: 1056">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- Bootstrap 5 + jQuery + LeaderLine -->
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src=".7.1/jquery.min.js"></script>
<script src=".3.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src=".0.7/leader-line.min.js" type="text/javascript"></script>