React Hook Disable parent DIV click

 import React, {useState} from 'react';

const [mouseButtonDownTime, setMouseButtonDownTime] = useState<Date>(null);

function handleSetMouseButtonDownTime (event: React.MouseEvent<HTMLDivElement>): void {

    if (event.button === 0) {

        setMouseButtonDownTime(new Date());

    }

}

function hasParent (child): boolean {

    let node = child.parentNode;

    while (node !== null) {

        if (node.classList && node.classList.contains('disabled-parent-click')) {

            return true;

        }

        node = node.parentNode;

    }

    return false;

}

function handleParentDivClick (message: string): (event: React.MouseEvent<HTMLDivElement>) => void {

    return function (event: React.MouseEvent<HTMLDivElement>): void {

        if (

            event.button === 0 &&

            mouseButtonDownTime !== null &&

            (new Date().getTime() - mouseButtonDownTime.getTime() < 200)

        ) {

            if (hasParent(event.target)) {

                return;

            }

            console.log(message);

        }

    };

}

function handleChildDivClick (): void {

    console.log('Child DIV click.');

}

return  (

    <div onMouseDown={handleSetMouseButtonDownTime} onMouseUp={handleParentDivClick('Parent DIV click.')}>   

        <span>Parent DIV.</span>

        <div className={'disabled-parent-click'} onClick={handleChildDivClick}>Child DIV.</div>

    </div>

);