How to remove an event in a nested element?

Question

React

<li
                key={name}
                onClick={clickHandler}
            >
                <div onMouseDown={this.mouseDown} onMouseUp={this.mouseUp} className="door" style={style}/>
                <a
                    className="menu-link"
                >
                    <span className="icon-container">{icon()}</span>
                </a>
            </li>

A click event is hung on the outer li, but I need it to not work in one of the blocks - when you click on it. On a div with a class of "door" I don't need the clickHandler method to fire. How to do it?