I'm using a ref to set an interval that's checking a buffer state of a media element.

The interval is successfully set, however, it's not being cleared.

  const keepCheckingBuffer = useCallback(
    () => {
      const targetRef = !hasVideo ? audioRef.current : vidRef.current;
      console.log(targetRef.readyState, targetRef.HAVE_FUTURE_DATA);
      console.log('keep checking buffer');

      if (targetRef.readyState <= targetRef.HAVE_FUTURE_DATA) {
        bufferCheckInterval.current = setInterval(() => {
          console.log('im running and interval!!!');

          if (targetRef.readyState > targetRef.HAVE_FUTURE_DATA) {
            setIsBuffered(true);
            setIsVideoReadyToPlay(true);
          }
        }, 1000);
        console.log('not buffering, setInterval');
      } else {
        console.log('clearInterval');
        clearInterval(bufferCheckInterval.current);
      }
    },

    [audioRef, vidRef, hasVideo],
  );

I'd prefer not to use a useEffect since my component rerenders a lot (it is expected) and I don't want to tie the triggering to a state inside the dependecy array.

I also tried to remove the useCallback hook.

Thanks all,