React state variable not update in callback function from IntersectionObserver

I'm trying to make an infinite scroll function with IntersectionObserver. When the callback is called I make a test to see if there is some loading happens and if so I want to cancel that new call. The function is that:

const loadMore = useCallback(() => {    
    if (loading) {
      return
    } 

    setLoading(true);
    
    console.log('Loading');
    setTimeout(() => {
      console.log('Finished');
      setLoading(false);
    }, 5000); 
  }, []);

The problem is that when the watcher calls loadMore again, and there is a load going on at that moment, the loading state sometimes has the old value (false), and setTimeOut is called again even if there is another one running. If I put the loading in the dependency array, the function is called many times (in loop) because I change it's value inside it. I tried to use a useRef to control loading, it works in the function, but I also want to use the loading state in JSX to show or not a text, but with the useRef variable it doesn't work in JSX and I find it a little ugly having to use two variables to control almost the same thing. Is there a way to do this just with the state?

The observer code:

useEffect(() => {
    const options = {
      root: null,
      rootMargin: '10px',
      threshold: 1.0
    }

    const observer = new IntersectionObserver(loadMore, options);

    if (loaderRef && loaderRef.current) {
      observer.observe(loaderRef.current);
    }
  }, [loadMore]);