Intersectionobserver's callback called twice when there's an await within

Question

I receive 70 results in one go, but i want to break up in chunks of 10 to display to the user. I'm trying to make it seem like there's infinite scrolling and loading happening.

however, when i'm trying to set a delay of 1 sec, load count starts incrementing by 30, and is intersecting gets logged twice.

Without the await delay(1000), it works as expected but I don't get to mock a loading state..

any idea why this quirk is happening?

  const delay = (ms: number) =>
    new Promise((res) => setTimeout(res, ms));

  const handleObserver = useCallback(
    async (entries: IntersectionObserverEntry[]) => {
      const target = entries[0];
      if (target.isIntersecting) {
        console.log('is intersecting');
        setMockRefetchLoading(true);
        // await delay(1000);
        setLoadCount((prev) => prev + 10);
        setMockRefetchLoading(false);
      }
    },
    []
  );

  console.log('load count', loadCount);

  useEffect(() => {
    const option = {
      root: null,
      rootMargin: '20px',
      threshold: 0,
    };
    const observer = new IntersectionObserver(handleObserver, option);
    if (moreResultsLoader.current)
      observer.observe(moreResultsLoader.current);
    return () => {
      if (moreResultsLoader.current)
        observer.unobserve(moreResultsLoader.current);
    };
  }, [handleObserver]);

these are the logs with and without await delay(1000) without delay with delay