具有动态内容的 React-Bootstrap Table - 行中单选按钮上的表单不起作用

Question

在我的 React 应用程序中，我从 API 请求数据并将其存储在状态中：

const [entities, setEntities] = useState([]);

在我的 useEffect 挂钩中，我从 API 获取数据 - 基本上我有以下示例数组作为我的实体：

 ["@Organization", "@City", "@Immobilie", "@Currency", "@Test"]

现在我想在 table 中显示所有实体，并在每一行中有一个单选按钮 select 一个实体。
我正在使用 React-Bootstrap 构建 Table

<Table striped bordered style={{ color: "#4d4d4d" }}>
                                <thead>
                                    <tr>
                                        <th>Entities</th>
                                    </tr>
                                </thead>
                                <tbody>                                        
                                    {entities.map(entity => <tr key={entity} style={{ color: "#4d4d4d" }}>
                                        <td>
                                            <Row>
                                                <Col>
                                                <Form.Check 
                                                    type="radio"
                                                    label={entity}/>                                                        
                                                </Col>
                                            </Row>
                                        </td>
                                    </tr>)}
                                </tbody>
                            </Table>

在 <tbody> 中，我将 entities 数组的每个条目映射到一个 Table 元素。 但现在我可以单击每个 table 行中的单选按钮，而无需取消 select 其他行。
我尝试将 <Form> 元素包裹在 Table 周围，但没有任何变化。
如果我将 <Form> 包裹在 <tbody> 周围，则 <tbody> 不会填充 table 行。
当我将 <Form> 放在 <Table> 元素中时，整个 table 不再呈现。

如何将单选按钮分组，以便在此动态构建中只有一个 select可用 table？

Answer 1

感谢 The KNVB 的评论，我向我的 Form.Check 元素添加了名称属性

<Form.Check 
  type="radio"
  name="entitySelection"                                                        
  label={entity} />

现在只有一个 tablerow-radio 按钮可以选择