React state not updating correctly - reactjs

Question

I have a usecase where I want to call an API at a regular interval until API returns a response saying not to reload further. Following is my code.
const [username, setUserName] = React.useState();
const [reloadEstimates, setReloadEstimates] = React.useState(true);
const [estimates, setEstimates] = React.useState([]);
const [progress, setProgress] = React.useState(true);
const [showError, setShowError] = React.useState(false);
const [errorMessage, setErrorMessage] = React.useState();
useEffect(() => {
const token = jwt(Cookies.get('id-token'));
const username = token["cognito:username"]
setUserName(username)
async function fetchData() {
let allestimates = await fetch(<api-url>, {
//mode: 'cors',
method: 'GET',
headers: new Headers({'Authorization' : 'Bearer ' + Cookies.get('id-token')})
})
.then(res => {
if(res.ok) {
return res.json();
}
throw new Error(`API call failed: ${res.code} - ${res.message}`);
})
.catch(er => { setShowError(true); setErrorMessage(`API error: ${er}`); } );
//console.log(allestimates)
return allestimates;
}
async function refreshEstimate() {
console.log("checkpoint1");
console.log(reloadEstimates);
if (reloadEstimates === true){
fetchData().then(
allelatimates =>{
setEstimates(allelatimates.estimates);
console.log(allelatimates )
console.log(allelatimates.reload )
if(allelatimates.reload === 'NOT RELOAD'){
console.log("checkpoint2");
return false;
}
return true;
}
).then((r)=>{console.log(r);setReloadEstimates(r); console.log(reloadEstimates)}).then(()=>setProgress(false));
}
else{
console.log('No need to fetch.')
}
}
var refreshInterval = setInterval(() => {
refreshEstimate();
}, 10000);
},[]);
I don't know why but setReloadEstimates(r) does not convert state reloadEstimates to false. And it keeps on running. Following is the console output. Please let me know what i am missing or is there another way to achieve this. Thanks.
enter image description here