useState Hook trigger selected rows to disappear (using react-bootstrap-table next)

Question

I'm trying to use react-bootstrap-table-next for my current project. In my App component, I have 2 child components, a table and a group of Buttons in a Form. The group of button is hidden per default, they only show if row/s are selected in the table. I'm using useState hook to control the visibility of the buttons.

The issue that I now have is that the row selection does not show when i select all/or one single row in the table. It looks like this has something to do with useState hook. When I remove the setState code from the select event handlers, I'm able to see the row selection...

Below my code:

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import BootstrapTable from 'react-bootstrap-table-next'
import { Button, Form } from 'react-bootstrap'

const App = () => {
  const [selectedRows, setSelectedRows] = useState([])
  const [isRowSelected, setIsRowSelected] = useState(false)

  const columns = [
    { dataField: '_id', text: '_id' },
    { dataField: 'name', text: 'name' },
  ]

  const dummyData = [
    {
      _id: 1,
      name: 'firstName',
    },
    {
      _id: 2,
      name: 'secondNameName',
    },
  ]

  const handleOnSelect = (row, isSelect) => {
    setSelectedRows([...selectedRows, row])
    setIsRowSelected(() => isSelect)
    return selectedRows
  }

  const handleOnSelectAll = (isSelect, rows) => {
    setIsRowSelected(isSelect)
    setSelectedRows(rows)
  }

  const selectRow = {
    mode: 'checkbox',
    clickToSelect: true,
    onSelectAll: handleOnSelectAll,
    onSelect: handleOnSelect,
  }

  return (
    <div>
      {isRowSelected && (
        <div>
          <br />
          <Form>
            <Form.Row className='align-items-center'>
              <Button variant='outline-danger'>Delete</Button>
              <Button variant='outline-primary'>Export</Button>
            </Form.Row>
          </Form>
        </div>
      )}

      <BootstrapTable
        keyField='_id'
        data={dummyData}
        columns={columns}
        selectRow={selectRow}
      />
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

const handleOnSelect = (row, isSelect) => {
  setSelectedRows([...selectedRows, row])
  setIsRowSelected(() => isSelect)
  return selectedRows
}

this function should return either true/false as per the docs.

https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/row-select-props.html#selectrowonselect-function