同じコンポーネントを二個呼び出して異なる関数を渡すと、一つ目のコンポーネントが二つ目のコンポーネントに渡した関数を実行してしまいます。

実現したいこと

ソースコードです。

import * as React from 'react';

import Btn from '../presentational/atoms/Btn';
import Form from '../presentational/atoms/Form';
import TodoList from '../presentational/molecules/TodoList';

interface IState {
    count: number;
    todos: string[];
    value: string;
}

export default class Todo extends React.Component<{}, IState> {

    constructor(props) {
        super(props);
        this.state = {
            count: 0,
            todos: [],
            value: ''
        }
    }

    addTodo = () => {
        const {todos, value } = this.state;
        this.setState({
            todos: [...todos, value]
        })
    }

    changeValue = (e) => {
        this.setState({
            value: e.target.value
        });
    }

    removeTodo = (index) => {
        const {todos} = this.state;
        this.setState({
            todos: [...todos.slice(0, index), ...todos.slice(index + 1)]
        })
    }

    render() {
        return(
            <>
                <div className="l-flex">
                    <Form onChangeFunction={this.changeValue} value={this.state.value} />
                    <Btn text="ADD!" onClickFunction={this.addTodo} />
                </div>
                <TodoList todos={this.state.todos} onClickFunction={this.removeTodo} />
            </>
        );
    }
}

import * as React from 'react';

import Btn from '../atoms/Btn';

const TodoList = (props) => {
    return(
        <ul className="list l-flex">
            {props.todos.map((todo, index) =>
                <li key={index} className="list-item l-flex">
                    <i className="far fa-square list-icon"></i>
                    <p>{todo}</p>
                    <Btn text="remove!" onClickFunction={props.onClickFunction(index)} />
                </li>
            )}
        </ul>
    );
}

export default TodoList;

1つ目のソースコードで二つのBtnコンポーネントを呼び出しています。(TodoListを呼び出して間接的にBtnコンポーネントを呼び出しています)
片方にはaddTodo関数を、もう片方にはremoveTodo関数を渡しています。
一つ目のBtnをクリックすると、addTodo関数が実行されてtodoリストに追加されるはずです。しかしremoveTodo関数が実行されてしまいます。二つ目のBtnをクリックしても何も起こりません。
この不具合を解消したいです。