js fetch problem with function that start itself

Question

Cant understand why onclick function start without any action any suggestions? Any other way to return data from API to be out of scope?

const api_url = 'https://hp-api.herokuapp.com/api/characters';
const students = document.querySelector('.students');

async function getApi() {
const response = await fetch(api_url);
const data = await response.json();
const dataLength = data.length;
const {
    name,
    dateOfBirth,
    house,
    wizard,
    ancestry,
    hogwartsStudent,
    hogwartsStaff,
} = data;

students.addEventListener('click', showAllStudents(data, dataLength));
}

 const showAllStudents = (data, dataLength) => {
for (let i = 0; i < dataLength; i++) {
    if (data[i].hogwartsStudent) {
        console.log(data[i].name);

    }
}
};

getApi();