React bootstrap: How to enable tab navigation when using Tab component

I'm using react-bootstrap version 2.4.0 and I'm using the Tab component. I want the website to be accessible by tab navigation but when I use the tab component the focus is set only on the active tab item and never gets to the other tabs.

        <Tabs
          className="mb-3"
          defaultActiveKey="A"
          mountOnEnter={true}
          unmountOnExit={true} >
          <Tab eventKey="A" title="A">
            <A/>
          </Tab>
          <Tab eventKey="B" title="B">
            <B/>
          </Tab>
          <Tab eventKey="C" title="C">
            <C/>
          </Tab>
        </Tabs>

I noticed that when the page is rendered, all the other tabs (not the active one) have tabindex="-1" on the button of that tab, which makes them inaccessible to tab navigation.

This is what the DOM looks like after react-bootstrap generated its HTML. You can see that the first tab button (the active one) doesn't have the tabindex="-1" attribute on it. The other buttons have it so when I'm using tab navigation they never get the focus and I can never click on them.

<ul class="mb-3 nav-tabs nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
      <button type="button" id="react-aria2325882265-4-tab-A" role="tab" data-rr-ui-event-key="A" aria-selected="true" class="nav-link active" aria-controls="react-aria2325882265-4-tabpane-A">A</button>
   </li>
   <li class="nav-item" role="presentation">
       <button type="button" id="react-aria2325882265-4-tab-B" role="tab" data-rr-ui-event-key="B" aria-selected="false" tabindex="-1" class="nav-link">B</button>
   </li>
   <li class="nav-item" role="presentation">
      <button type="button" id="react-aria2325882265-4-tab-C" role="tab" data-rr-ui-event-key="C" aria-selected="false" class="nav-link" tabindex="-1">C</button>
   </li>
</ul>

How can I use the Bootstrap Tab component and make it accessible with tab navigation?

I saw that if I use the Nav component it doesn't have this problem because it doesn't put the tabindex="-1" on the a tag that is generated by react-bootstrap. However I can't use the Nav component because I don't have a link to go to, but a component to render, and this is exactly what the tab component is used for.

The expected behaviour of Tabs as per ARIA Practices Guideline (APG) is that the arrow keys on the keyboard change focus within this composite component.

Depending on the visual presentation of the tabs, the left and right arrow keys are used for a horizontal arrangement, up and down for vertical ones.

React-Bootstrap’s Tab component implements the arrow keys, but both up/down and left/right navigate the tabs.