so in this challenge, I have to change the element's color on mouse entering it as well as mouse leaving.

This is the website for the challenge.

https://www.jschallenger.com/javascript-dom-exercises/events-and-user-interactions/cursor-enter-leave-event

Below lines of code are presented:

const element = document.querySelector('#element');

const toggleColor = (isEntering) => {
  element.style.background = isEntering ? 'orange' : 'black';
};

And I came up with below codes:

element.addEventListener('mouseenter', toggleColor(true));
element.addEventListener('mouseleave', toggleColor(false));

But it doesn't work and the correct answer is as below:

element.addEventListener('mouseenter', () => toggleColor(true));
element.addEventListener('mouseleave', () => toggleColor(false));

Here, why can't I just put toggleColor(param) directly into addEventListener's 2nd parameter? Why do I have to put arrow function to call the toggleColor function?

It would be much appreciated if anyone could explain it.