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

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>
            );
        }

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>
            );
        }