Вариант с нативным js

const scrollHandler = (e) => useCallback(() =>{
  const content = document.getElementsByClassName('js-tabs-ingredient');

  Array.from(content).forEach((el) => {
    const rect = el.getBoundingClientRect();
    const elemTop = rect.top;
    const elemBottom = rect.bottom;
    const isVisible =
      elemTop < window.innerHeight / 2 && elemBottom > window.innerHeight / 2;

    if (isVisible) {
      const type = el.dataset.id;
      setCurrentTab(type);
    }
  });
}, []);

<div className="js-tabs-ingredient" data-id={currentTab}>
  <h3 className="text text_type_main-medium mb-6" ref={tabRefs[currentTab]}>
    {title}
  </h3>
</div>