Prevent onClick of base element if onClick of overlay button is clicked

Question

I have a <button> component overlayed on a <div> component that is shows an image.

The button component is a red [X] as shown in the picture below. I have a seperate onClick Listener for the <button> and the <div>. I want to make sure when the onClick of the button is fired, i.e. the [X] is clicked the onClick of the <div> should not run.

How to do this?

I have tried this, but it does not work
First the onClick of the <button> runs and then the onCLick of <div> runs

  const onClickButtonHandler = (event) => {
    event.preventDefault();
    console.log("BTN HANDLER")
  };

  const onClickDivHandler = (event) => {
    console.log("DIV HANDLER")
  };