How to tab past closed modal links? #a11y

General accessibility question here. I'm looking for general approach, but will also note that this is in a React app so statefulness is a consideration.

Take the following code example of a list of actions, which open corresponding modals. Ideally, you would be able to tab through the list of actions in sequence - but because the modals have links inside, the tabbing experience is not ideal. Basically, you hit 'action 1' and then tab 6 more times before hitting 'action 2' due to the 5 links contained in the modal.

<li class="list__item">
   <!-- modal trigger -->
   <a href="#" class="modal">Action 1</a>

   <!-- modal containing links -->
   <aside class="item__modal modal modal--active" id="modal-interview-1">
      <a href="#>Sample 1</a>
      <a href="#>Sample 2</a>
      <a href="#>Sample 3</a>
      <a href="#>Sample 4</a>
      <a href="#>Sample 5</a>
   </aside>
</li>
<li class="list__item">
   <!-- modal trigger -->
   <a href="#" class="modal">Action 2</a>

   <!-- modal containing links -->
   <aside class="item__modal modal modal--active" id="modal-interview-1">
      <a href="#>Sample 1</a>
      <a href="#>Sample 2</a>
      <a href="#>Sample 3</a>
      <a href="#>Sample 4</a>
      <a href="#>Sample 5</a>
   </aside>
</li>

The question on approach what is the best way to handle hiding the anchor tags from the DOM, or at least from tabbing and screen reading, when a tab is disabled? I've tried adding disabled to the anchors, and adding an aria-focusable="false" to the modal when it's inactive... but it's not giving me the desired effect of skipping the links.

Thanks for your help with this issue.