I am using react-bootstrap-table-next to implement crud functionalities. I need a situation whereby after the inline editing is done the data is saved to the database. Right now, after reloading the page the data-table returns back to its initial state.

These are my codes below

const

   const [data, setData] = useState([]);
   const apiUrl = 'api/terminals';

cellEdit-block

   const cellEdit = cellEditFactory({
   mode: 'dbclick',
   blurToSave: true,
   afterSaveCell: onAfterSaveCell,
   }); 

api call

const onAfterSaveCell = (value, name) => {
axios({
method: 'POST',
url: apiUrl,
headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  data: {
    name: value[name],
  },
  }).then(response => {
  setData(response);
});
};

jsx

 <>
    <BootstrapTable
    keyField="id"
    data={data}
    columns={columns}
    striped
    hover
    condensed
    pagination={paginationFactory()}
    cellEdit={cellEdit}
    filter={filterFactory()}
    noDataIndication="Table is Empty"
    
  />
 </>

I get these errors on the console when I try this formula

   react.development.js:220 Warning: Failed prop type: Invalid prop `data` of type `object` 
   supplied to `DataProvider`, expected `array`.