Wrong value of state displayed after refreshing a page from useEffect() - reactjs

Question

I have a problem with my page that fetch data from a server and displays it for the user. I am using the hook useEffect for it.
My problem is that the first time I visit a page the correct data are displayed (so from /home I go to /product1 I get correct information). But after manually refreshing my page /product1 even though the server is getting the correct information again, my state object of my page will not update again. Is there a way to fix this? Code below:
const [productInfo, setProductInfo] = useState({
saleStarted : null,
quantityPerSize : []
})
useEffect(() => {
const fetchdata = async () => {
setLoading(true);
const query = new db.Query('Products');
query.equalTo('productId', params.productId);
await query.find()
.then(async (response) => {
setdata(response[0].attributes);
})
.catch((err) => {
setError(err);
console.log(err);
})
.finally(() => {
setLoading(false);
});
}
if(isInitialized){
fetchdata();
}
}, [isInitialized]);
useEffect(() => {
const saleStartedInfo = async() => {
const options = {
link : url + params.contractId,
}
try{
let started = await db.find(options)
console.log(started); //returns true
setProductInfo({...productInfo, saleStarted : started});
}catch(e){
console.log(e);
}
}
const quantitySize = async() => {
let _quantityBySize = [];
for(let k = 0 ;k<data.numberOfSize;k++) {
let options = {
address : url + params.contractId,
}
try{
let quantitySize = await db.find(options);
_quantityBySize.push(quantitySize)
} catch(err) {
console.log(err);
}
}
console.log(_quantityBySize); // let's say returns [5,4,10] if product has 3 size
setContractInfo({...contractInfo, quantityPerSize : _quantityBySize})
}
if(isInitialized && data){
saleStartedInfo();
quantityMinted();
}
}, [data])
So after rendering this page the first time it will show sale started, and quantity 5, 4 and 10. After refresh it will show sale not started and quantity === [] (empty array)