Реагировать: переопределить onClick-Event родительского элемента div

Я борюсь со следующим: у меня есть div-Container, который содержит много вещей и границу, щелкнув div, я хочу запустить событие onClick, которое вызывает метод для перенаправления меня на другой маршрут. Внутри этого div-контейнера у меня есть небольшой круг, который должен что-то сделать, щелкнув по нему и активировав его onClick-Event. Есть ли возможность «переопределить» родительские div-контейнеры onClick-Event, потому что каждый раз, когда я нажимаю на круг, запускается onClick div, и я перенаправляюсь на другой маршрут. Небольшие фрагменты:

Контейнер с кругами: handleExit должен вызываться всякий раз, когда вы щелкаете в любой позиции внутри контейнера, за исключением щелчка по некоторым кругам с onClick-Events. В этом случае следует вызвать handleBackToFirstAssistant или handleBackToSecondAssistant.

<div
   className = "contentAssistantBorder"
   onClick = {this.handleExit}
 >
  ...
  <div className = "circleDiv">
     <p
        className = "circle"
        onClick = {this.handleBackToFirstAssistant}
      />
     <p
       className = "circle"
       onClick = {this.handleBackToSecondAssistant}
     />
      <p className = "filledCircle" />
     </div>
  </div>

ручкаВыход:

handleExitAssistant() {

 this.props.history.push("/search");

}

хэндлбакктосекундассистант:

handleBackToSecondAssistant() {
  this.setState(
   {
      secondAssistant: true
    },
     () => this.setState({ thirdAssistant: false,  firstAssistant:    false })
  );
}