Modal Doesnt Work in Mozilla in React + Bootstrap

I have a search box which should open a Modal on onClick function. I am using Bootstrap for the Modal. I have the below code,

const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

const handleKeyDown = (event) => {
  if (event.shiftKey && (event.key == 'k' || event.key == 'K')) {
    handleShow();
  }
};

useEffect(() => {
  window.addEventListener('keydown', handleKeyDown);
});

 <InputGroup onClick={handleShow}>
   <img className={styles.searchIcon}/>
   <Input
      placeholder="Search (Shift + K)"
      disabled
      className={styles.searchBar}
   />
 </InputGroup>

With this code, everything works totally fine in Chrome and Safari. But when I use in Safari, the onClick functionality doesn't work as expected. (The modal works when I click on Search Icon and doesnt work when I click on Placeholder)

I guess I am not capturing the events the way it should be. Can someone assist me on this.