В onClick нужно передавать функцию-обработчик, а вы передаете
функция-обработчик() === результат вашей функции...
То есть как только кнопка оказывается на странице, сразу же происходит вызов (круглые скобки).
Пример:
function myFunc(data) { console.log(data) }
console.log( myFunc('test') ) => выведеть в консоль 'test'
console.log( myFunc ) => выведеть в консоль function myFunc ...
P.S. естественно, сразу возникает вопрос - как передать функцию + аргумент... Вам нужен либо метод bind, либо анонимная функция... Есть у разных подходов плюсы-минусы, но я тем не менее люблю использовать data-аттрибуты для этого.. тогда при передаче функции обработчик, у меня в event.target.dataset - есть все что нужно.
P.P.S. когда возникают такие вопросы, значит нужно идти и копать основы, так как в дальнейшем только сильнее будет усиливаться непонимание между функциями, аргументами, полями свойств в props'ax и так далее... Начать по теории, рекомендую отсюда:
https://learn.javascript.ru/function-basics, затем:
https://learn.javascript.ru/introduction-browser-events 