如何在React中启用roving tabIndex？

Question

我有一个我正在通过React类中的循环渲染的单选按钮组的列表。我希望能够跳至每个组并通过箭头键进行选择。这是我的循环代码：

{questions.map((question, index) =>
    <div key={question.id}>
        <label>{question.text}</label>
        <label>
            <input type="radio" name={question.name} value="Completely Agree" />
            <div>Completely Agree</div>
        </label>
        <label>
            <input type="radio" name={question.name} value="Agree" />
            <div >Agree</div>
        </label>
        <label>
            <input type="radio" name={question.name} value="Somewhat Agree" />
            <div >Somewhat Agree</div>
        </label>
        <label>
            <input type="radio" name={question.name} value="Somewhat Disagree" />
            <div >Somewhat Disagree</div>
        </label>
        <label>
            <input type="radio" name={question.name} value="Disagree" />
            <div >Disagree</div>
        </label>
        <label>
            <input type="radio" name={question.name} value="Completely Disagree" />
            <div>Completely Disagree</div>
        </label>
    </div>
)}

我尝试使用react-roving-tabindex，但似乎无法理解如何通过打字稿来翻译他们演示的示例。我调查了Creating an accessible tab component with React文章，但不确定在各处使用ID是否是一个好主意。 React是否有一种方法可以启用更简单的启用tabIndexes漫游的方式？