check boxes are not functioning in react-bootstrap-table-next

I am using react-bootstrap-table2, to make tables, I have encounter an issue i.e

I want o have a checkbox inside my table, so I am following This, mention in the documentation, but I am getting unexpected result.

My code

For selecting the row

const selectRow = {
    mode: 'checkbox',
    clickToSelect: true,
    classes: 'selection-row',
};

Table rendering

  <BootstrapTable
    keyField="id"
    data={tableData[0].rowsData}
    columns={tableData[0].columnsData}
    selectRow={selectRow}
 />

I Think issue is coming because of my data, as it is nested one And I am rendering it, but I am not able to resolve it.

My data

let tableData = [
{
  rowsData: [
    {
      fname: "john",
      lname: "smith"
    },
    {
      fname: "steve",
      lname: "warn"
    },
    {
      fname: "michel",
      lname: "clark"
    }
  ],
  columnsData: [
    {
      dataField: "fname",
      text: "First name",
      sort: true
    },
    {
      dataField: "lname",
      text: "last Name",
      sort: true
    }
  ]
}

];

Here is my code sandbox link This

You're telling keyField="id" yet each of your rowsData has no id. Give each of them an id and it should work.