Poll API every 2 seconds and update state until result turns successful/failure - React - async-await

Question

I have an array of ids and I need to loop through the array and call an API with the id. The response from the API will have a Status field which ranges from [0,1,2,-1]. I want to call the API and update the state with the responses. I have a working code which has a Promise which gets resolved only if the Status is Finished or Failed. How do I go over about updating the state even while the Status is in Started and Queued.
This is my code.
import React from 'react';
import './style.css';
import { get, includes, keys, forEach, map } from 'lodash';
const Status = {
Queued: 0,
Started: 1,
Finished: 2,
Failed: -1,
};
/**
* Keeps getting data every 2.5 seconds
* If path is Status, keep calling the API every 2.5 seconds until Status is Finished or Failed, and then resolve
* #param url
* #param path
*/
/**
* The MAP where the list of timers are stored
*/
let dataFetchingTimerMap = {};
const clearDataFetchingTimer = (key) => {
/**
* Clear the timeout
*/
clearTimeout(dataFetchingTimerMap[key]);
/**
* Delete the key
*/
delete dataFetchingTimerMap[key];
};
const setDataFetchingTimer = (key, cb, delay) => {
/**
* Save the timeout with a key
*/
dataFetchingTimerMap[key] = window.setTimeout(() => {
/**
* Delete key when it executes
*/
clearDataFetchingTimer(key);
/**
* Execute the callback (loop function)
*/
cb();
}, delay);
};
export const getDataAtIntervals = (url, path) => {
const timerKey = `${url}_${path}`;
clearTimeout(+timerKey);
return new Promise((resolve, reject) => {
(async function loop() {
try {
const resultData = await fetch(url);
const result = await resultData.json();
if (
get(result, path) &&
includes(
[Status.Finished, Status.Failed, Status.FailedWithReturnFile],
get(result, path)
)
) {
/**
* Resolve with the data
*/
return resolve(result);
}
setDataFetchingTimer(timerKey, loop, 2500);
} catch (e) {
reject(e);
}
})();
});
};
/**
* Clear every timeout
*/
export const clearGetDataAtIntervals = () =>
forEach(keys(dataFetchingTimerMap), clearDataFetchingTimer);
export default function App() {
const [state, setState] = React.useState([]);
const handleClick = async () => {
const ids = [1, 2, 3];
const responses = await Promise.all(
map(
ids,
async (id) =>
await getDataAtIntervals(
`https://jsonplaceholder.typicode.com/todos/${id}`,
'completed'
)
)
);
setState(responses);
};
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}
Please advice. This is my Stackblitz link:
https://stackblitz.com/edit/react-dos3i3?file=src%2FApp.js,src%2Findex.js