How to prevent React 16 from propagating a Click to child component

Question

Situation: I have a chat and a messagelist inside it, same as a WhatsApp chat screen. When clicking an image (<ModalImageCors\>), it opens an image modal. Ok. But if selectingMsgs state is true, I want the behavior of clicking the image to just select the message, and not open the image modal. Atm, preventing the click from propagating is not working. It selects the message, but it also pops up the image modal. I wanted to prevent the click from reaching the image if selectingMsgs === true.

else if (message.mediaType === "image") {
      return (
        <div
          onClick={(e) => {
            if (selectingMsgs) {
              e.stopPropagation();
              e.preventDefault();
              handleCheckboxChange(message.id);
            }
          }}
        >
          <ModalImageCors imageUrl={message.mediaUrl} />
        </div>
      );

The <ModalImageCors> component:

const ModalImageCors = ({ imageUrl }) => {
    const classes = useStyles();
    const [fetching, setFetching] = useState(true);
    const [blobUrl, setBlobUrl] = useState("");

    useEffect(() => {
        if (!imageUrl) return;
        const fetchImage = async () => {
            const { data, headers } = await api.get(imageUrl, {
                responseType: "blob",
            });
            const url = window.URL.createObjectURL(
                new Blob([data], { type: headers["content-type"] })
            );
            setBlobUrl(url);
            setFetching(false);
        };
        fetchImage();
    }, [imageUrl]);

    return (
        <ModalImage
            className={classes.messageMedia}
            smallSrcSet={fetching ? imageUrl : blobUrl}
            medium={fetching ? imageUrl : blobUrl}
            large={fetching ? imageUrl : blobUrl}
            showRotate="true"
            alt="image"
        />
    );
};

<ModalImage> component:

import * as React from "react";

export interface ModalImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
    /* The small image to display */
    small: string;

    /* The srcset attribute for the small image */
    smallSrcSet?: string;

    /* The medium image to display */
    medium?: string;

    /* The large image to display */
    large?: string;

    /* The alt tag for the image */
    alt?: string;

    /* Should the download button be hidden? */
    hideDownload?: boolean;

    /* Should the zoom button be hidden? */
    hideZoom?: boolean;

    /* Should the rotate button be shown? */
    showRotate?: boolean;

    /* The color to display in the background. */
    imageBackgroundColor?: string;

    /* The class name for the modal */
    className?: string;
}

declare class ModalImage extends React.Component<ModalImageProps> {}
declare class Lightbox extends React.Component<ModalImageProps> {}

export default ModalImage;
export { Lightbox };

React ver:

    "react": "^16.13.1",
    "react-dom": "^16.13.1",

I tried this... :

onClick={(e) => {
            if (selectingMsgs) {
              e.stopPropagation();
              e.preventDefault();

...both directly on the image modal and on a parent div, didnt work