Как вешать и отслеживать каждый раз новый setInterval на объект, прилетающий из API?

1. мне из API прилетают данные, и я сохраняю в стейт только объекты со статусом 1 или 2.

 const [items, setItems] = useState([]);
        
          const handleOnFetchData = useCallback((data) => {
            setItems(
              data.results.filter(
                (report) => report.status === 1 || report.status === 2
              )
            );
          }, []);
    

2. У объектов со временем менется этот статус. И нужно его отслеживать каждые 5 секунд в интервале.

   Как делаю я:

3. Есть useEffect, который зависит от стейта с айтемами, и если стейт не пустой, то перебирает стейт и для каждаого элемента запускает функцию monitoringItem

         let interval;
   
         useEffect(() => {
           if (items.length > 0) {
             items.forEach((report, i) => {
               interval = setInterval(() => {
                 monitoringItem(report.record_id);
               }, 5000);
             });
           } else {
             clearInterval(interval);
           }
         }, [items]);
   

4. сама функция monitoringItem отправляет каждые 5 секунд запрос и проверяет статус у элемента. если статус отличается от 1 или 2, тогда останавливает интервал и удаляет этот айтем из стейта.

        const monitoringItem = useCallback(
            async (id) => {
              const response = await API.get(`/reports/${id}`);
   
              const monitoredReport = response.data.results[0];
   
              if (monitoredReport.status !== 2 && monitoredReport.status !== 1) {
                clearInterval(interval);
                setItems(
                  items.filter((rep) => rep.record_id !== monitoredReport.record_id)
                );
              }
            },
            [items]
          );
   

   Вопрос и проблема: Как мне на каждый айтем при добавлении вешать свой setInterval. Сейчас все хорошо с 1 айтемом. но при добавлении других все ломается.