I am working in a jhipster application. when I create my own modal and set the state to true, my custom modal shows on initial render of my application, but when I set it to false and try to call the modal through my function,it does not appear.

Then when I call the handleShow(), the alert saying "hello" appears on the browser, but it does not call the setShow().

I have also tried to use the inbuilt modal of jhipster, but it seems I have to pass a specific URL containing an id before it will appear

imports

 import { Modal } from 'react-bootstrap';

state

    const [showModal, setShow] = useState(false);
     

Modal function

    const handleClose = () => setShow(false);
    const handleShow = () => {
    alert('hello');
    setShow(true);
  };

Delete function

   const handleDelete = row => {
   dispatch(deleteEntity(row));
  };

The bootstrap action column and Modal content

    {
  dataField: 'databasePKey',
  text: 'Actions',
  headerStyle: { backgroundColor: 'red', color: 'white' },
  formatter: (cellContent, row) => {
    return (
      <>
        <div className="btn-group flex-btn-group-container">
          <Button onClick={() => handleShow()} color="danger" size="sm" 
      data-cy="entityDeleteButton">
            <FontAwesomeIcon icon="trash" /> <span className="d-none d- 
      md-inline"></span>
          </Button>
          {showModal === true ? <Modal /> : null}
        </div>
        <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 variant="primary" onClick={() => 
          handleDelete(row.id)}>
              Confirm
            </Button>
          </Modal.Footer>
        </Modal>
       </>
      );
      },
      },