data-checkbox data-click-to-select not working reactjs - react-bootstrap

Question

This code performs a render of a bootstrap table. In this table there are 2 columns with data and a total of 4 rows. I wish to have a checkbox at the side before the first column of data to select the entire row of data. I have tried using "data-click-to-select" and "data-checkbox", but no check box appears. What should I do to enable the selection of data by row?
Not sure if its because I'm not importing any react-bootstrap modules.
import axios from 'axios';
import React, { Component } from 'react';
import { table } from 'react-bootstrap'; // this is reflected as an unused variable
This is the example I tried to follow to get the checkbox: https://live.bootstrap-table.com/example/methods/get-selections.html
render() {
const obj = (this.state.message);
const datamapping = Object.entries(this.state.message);
return (
<div>
<div className="viewall">
<table class="table table-hover" data-click-to-select="true">
<thead>
<th data-checkbox="true"></th>
<th scope="col">key1</th>
<th scope="col">key2</th>
</thead>
<tbody>
{obj.Items?.map((data, key) => {
return (
<tr key={key}>
<td></td>
<td>{data.key1}</td>
<td>{data.key2}</td>
</tr>
)
})}
</tbody>
</table>
</div>
</div>
);
}

Answer 1

Found a workaround solution that does not hinge on data-checkbox or data-click-to-select - by clicking on a button that is present on each row and sending the key (array number) together with the data over.
handleClick(obj, i) {
//this.props.history.push("/signIn.js");
console.log(obj.Items[i]);
}
render() {
const obj = (this.state.message);
const datamapping = Object.entries(this.state.message);
return (
<div>
<div className="viewall">
<table class="table table-hover">
<thead>
<th data-checkbox="true"></th>
<th scope="col">key1</th>
<th scope="col">key2</th>
</thead>
<tbody>
{obj.Items?.map((data, key) => {
return (
<tr key={key}>
<td>
<button type="button" class="btn btn-primary" onClick={ () => this.handleClick(obj, key)}>
Sign In
</button>
</td>
<td>{data.key1}</td>
<td>{data.key2}</td>
</tr>
)
})}
</tbody>
</table>
</div>
</div>
);
}