Почему мой обработчик onClick срабатывает несколько раз?

Question

У меня есть родительский компонент <FilterGroupSection>, который создает коллекцию <RuleGroup /> дочерних компонентов:

return Object.values(this.props.filterGroups).map(function(ruleGroup) {
    const key = ruleGroup.id;
    return (
        <React.Fragment key={key}>
            <RuleGroup
                id={key} 
                key={key} 
                deleteRuleGroup={(e) => this.deleteRuleGroup(key, e)}
            />
            <Grid.Row></Grid.Row> {/*empty row to create space between filter groups*/}
        </React.Fragment>

    )
}.bind(this))

Это работает нормально и, как и ожидалось.

У меня проблемы сФункция-обработчик, передаваемая <RuleGroup />, deleteRuleGroup={(e) => this.deleteRuleGroup(key, e)}

В компоненте <FilterGroupSection /> функция обработчика компонента:

deleteRuleGroup(id, e) {
    console.log('delete rule group called')

    this.props.filterGroupDeleted({filterGroupId: id})
}

Я закомментировал this.props.filterGroupDeleted({filterGroupId: id}), и поведение было ожидаемымчто заставляет меня поверить, что функция запускается несколько раз при повторном рендеринге компонента.

В компоненте <RuleGroup /> функция deleteRuleGroup:

<Button                   
    color={"teal"} 
    size={"tiny"}
    onClick={(e) => this.props.deleteRuleGroup(id, e)}
>

При нажатии на кнопку,Функция-обработчик продолжает вызываться до тех пор, пока не отобразится ошибка RangeError: Максимальный размер стека вызовов .Как я могу гарантировать, что функция обработчика вызывается только один раз при нажатии кнопки?

Спасибо