Bootstrap table cell element not detecting event BootstrapTable from "react-bootstrap-table-next"

I have react bootsTrap table for displaying cafe/accessory/kitchen items. In the first column of each row, i have checkbox to select that item and tranfer that item to another bootstrap table. now the problem is that the onClick event on the checkbox element, only detects the boolean change in checkbox state for the first click. then from second click there is no console.log in the browser console and neither does the item adds again to the new table. I think the onClick is not getting detected after the first time, but i cant figure out why? and how to solve this issue.

CODE:

 const [checkboxState, setCheckboxState] = useState(false);

useEffect(() => {

    if (selectedRow) {
      console.log(selectedRow, "selected row")

      // console.log(checkboxState,"checkbox state")

      let isPresentFlag = false;
      let isPresent = selectedItems.filter((item) => item._id === selectedRow._id);
      isPresent.length > 0 ? isPresentFlag = true : isPresentFlag = false;

      if (isPresentFlag) {

        let newPayload = selectedItems.filter((item) => isPresent._id !== item._id)

        setSelectedItems(newPayload);
      } else {

        setSelectedItems([...selectedItems, selectedRow])
      }

    } else {

      function getAllSuppliers(token) {

        axios.post(`url`, {}, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }).then(res => { setAllSuppliers(res.data.data) }).catch(err => console.log(err))


      }
      getAllSuppliers(userToken);

    }

   
  }, [selectedRow])

 // function to select the row/rows with checkbox
  function checkboxFormatter(cell, row) {
   
    return (

      <FormGroup check>

        <Label check>
          <Input
            // id="checkbox1"
            // ref={checkboxRef}
            style=
            type="checkbox"
            onClick={() => { setSelectedRow(row); setCheckboxState(!checkboxState) }}
          />

        </Label>
      </FormGroup>
    )
  }

//bootstrap table columns definition:

const columnsAccessoryItems = [

    {
      dataField: "_id",
      hidden: true
    },
    {
      text: props.t(""),
      dataField: "checkbox",
      formatter: checkboxFormatter,
      sort: true,
      headerStyle: (colum, colIndex) => {
        return { width: "2%" }
      },
    },
    {
      text: props.t("#"),
      formatter: (cell, row, rowIndex) => {
        return rowIndex + 1
      },
      // dataField: "_id",
      sort: true,
      headerStyle: (colum, colIndex) => {
        return { width: "2%" }
      },
    },
    {
      text: props.t("Item id"),
      //formatter: employeeFormatter,
      dataField: "_id",
      sort: true,
      hidden: true,
      headerStyle: (colum, colIndex) => {
        return { width: "8%" }
      },
    },
    {
      text: props.t("Image"),
      formatter: (cell, row) => {
        return (
          <img className="avatar-md rounded-circle img-thumbnail" src={row.image_url} alt={row.name + "image"} />
        )
      },
      // dataField: "image_url",
      sort: true,
      headerStyle: (colum, colIndex) => {
        return { width: "8%" }
      },
    },
    {
      text: props.t("Item"),
      //formatter: employeeFormatter,
      dataField: "name",
      sort: true,
      headerStyle: (colum, colIndex) => {
        return { width: "8%" }
      },
    },
    {
      text: props.t("Available QTY"),
      formatter: (cell, row) => {
        return (
          <p>{`0 ${row.unit} ${row.sub_unit ? 0 : ""} ${row.sub_unit || ""}`}</p>
        )
      },
      dataField: "formula",
      sort: true,
      headerStyle: (colum, colIndex) => {
        return { width: "8%" }
      },
    },

  ]