I am trying to perform an axios delete operation on a react-bootstrap-table, but I am getting this error on the console

  DELETE http://localhost:9000/api/terminals/[object%20Object]
  Uncaught (in promise) Error: Request failed with status code 400

These are the codes

const

  const apiUrl = 'api/terminals';

UseState and UseEffect

     const [data, setData] = useState([]);

       useEffect(() => {
       getData();
       }, []);

      const getData = () => {
     axios(apiUrl).then(res => {
     setData(res.data);
    });
    };

Axios delete

        const handleDelete = rowId => {
        axios.delete(`${apiUrl}/${rowId}`).then(() => setData(data));
        };

Modal Content

     const ModalContent = () => {
          return (
             <>
      <Modal show={showModal} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Confirm delete operation</Modal.Title>
      </Modal.Header>
      <Modal.Body>Are you sure you want to delete this Terminal? 
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={handleClose}>
          Cancel
        </Button>
        <Button onClick={id => handleDelete(id)}>Confirm</Button>
      </Modal.Footer>
    </Modal>
   </>
   );
  };

main jsx with bootstrap Table

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