Неожиданный результат вызова функции. Что я делаю не так?

Проблема: при вызове функции addEducationDiv вызывается removeEducationDiv, причем бесконечное количество раз

class SeekerRegistration extends Component {
    constructor(props) {
        super(props)
        this.state = {
            educations: [({section: Education})],
            ...
        }
        this.addEducationDiv = this.addEducationDiv.bind(this);
        this.removeEducationDiv = this.removeEducationDiv.bind(this);
    }

addEducationDiv() {
    const educations = [...this.state.educations, {section: Education}]
    this.setState({educations});
}

removeEducationDiv({id}) {
    console.log('removing...')
    const educations = this.state.educations.filter(div => div.id !== id)
    this.setState({educations})
}

render() {
    const {addEducationDiv, removeEducationDiv} = this
    const {educations} = this.state
    return <div>
        {educations.map((n, i) =>
            <div><Education id={n.id}/>
                {(i === educations.length - 1) ?
                    <AddButton addSection={addEducationDiv}/> :
                    <RemoveButton removeSection={removeEducationDiv(i)}/>}
            </div>)}
    </div>
}}

Коды кнопок простые:

const AddButton = ({addSection = f => f}) =>
    <button onClick={addSection}>+</button>
const RemoveButton = ({removeSection = f => f, id}) =>
    <button onClick={removeSection(id)}>-</button>

Почему когда нажимаю на кнопку AddButton,многократно происходит событие, которое даже к ней не привязано? При этом примерно после тысячи вызовов removeEducationDiv всё-таки происходит addEducationDiv, то есть событие добавляется. Потом, естественно, выскакивает сообщение "Maximum update depth exceeded"