data-scroll-call not firing event

[Hasan-Aga]

I have a component with data-scroll-call="testEvent" and I am trying to make it fire the event when the component is in view. here is the component:

 <section
      id="education"
      className="education"
      data-scroll-section
      data-scroll
      data-scroll-class="purpleColor"
      data-scroll-call="testEvent2"
    > 
    ... 
</section>

I attached an event listener to the document as follows:

  useEffect(() => {
    on("call", () => console.log("test event"));
  }, []);

Where on is this function:

function on(eventType, listener) {
  document.addEventListener(eventType, listener);
}

But no event is fired! any fix?

This issue is also related to the fact that scroll.on() does not exists, but It seems the problem is deeper since adding the event listener manually does not help either.