Fetch only shows when re-rendering or refreshing page - node.js

Question

I have a quiz game project where I've done both backend and frontend. In FE I'm fetching clues for the quiz from BE, and everything works except one thing: When playing the quiz for the first time in a while, the clue data that should be fetched doesn't show. Like this:
But when re-rendering the component or refreshing the whole browser it shows perfectly. Like this:
It also shows perfectly while working on the project, so it's only that first time when you haven't been refreshing or re-rendering in a while that it doesn't show. Is there anything to do to make it work smoothly every time? And could the problem be in FE or BE?
This is the component where I'm fetching:
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { game } from 'reducers/game';
import swal from 'sweetalert';
import { Mapillary } from 'components/Mapillary/Mapillary';
import { Loading } from 'components/Loading/Loading';
import { OuterWrapper, InnerWrapper } from 'GlobalStyles';
import { ClueWrapper, MapillaryContainer, ClueContainer, SpecialSpan, ClueText, AnotherClueButton } from './Clues.Styles'
export const Clues = () => {
const [games, setGames] = useState([])
const [loading, setLoading] = useState(false);
const [currentClue, setCurrentClue] = useState(0);
const [level, setLevel] = useState(5);
//* Fetching clues
const fetchClues = () => {
console.log('loading');
setLoading(true);
fetch('https://final-project-api-veooltntuq-lz.a.run.app/games')
.then((response) => {
return response.json()
})
.then((response) => {
setGames(response.games)
console.log('data is fetched')
})
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}
//* Setting current score
const currentScore = useSelector((store) => store.game.score);
const dispatch = useDispatch();
const handleClick = () => {
setCurrentClue(currentClue + 1);
if (currentClue < 4) {
dispatch(game.actions.setScore(currentScore - 1)); //* If clue index < 4 = Set score to -1
setLevel(level - 1);
} else {
dispatch(game.actions.setScore(currentScore === 1)); //* If clue index > 4 = Set score to 1
swal('Time to make a guess!', {
button: 'OK'
});
}
};
useEffect(() => {
fetchClues()
}, [])
const activeClue = games[currentClue];
if (loading) {
return (
<OuterWrapper>
<InnerWrapper>
<Loading />
</InnerWrapper>
</OuterWrapper>)
}
if (currentClue < 5) { //* Stop showing clues after clue 5
return (
<div>
<MapillaryContainer>
{console.log(currentClue)}
<Mapillary width="auto" height="94vh" imageId={currentClue === 0 ? '343242160559702' : currentClue === 1 ? '463849228173207' : currentClue === 2 ? '273852291114652' : currentClue === 3 ? '953489715410448' : currentClue === 4 ? '814918985897976' : ''} />
</MapillaryContainer>
<ClueWrapper>
<ClueContainer>
<SpecialSpan>{level} points</SpecialSpan>
<ClueText>{activeClue && activeClue.gameOne}</ClueText>
<AnotherClueButton type="button" onClick={() => handleClick()}>I need another clue</AnotherClueButton>
</ClueContainer>
</ClueWrapper>
</div>
)
} else {
return (
<div>
<MapillaryContainer>
<Mapillary width="auto" height="94vh" imageId="814918985897976" />
</MapillaryContainer>
</div>
)
}
}
And this is the BE:
import express from "express";
import cors from 'cors'
import mongoose from 'mongoose'
import games from "./data/games.json";
const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/games"
mongoose.connect(mongoUrl, { useNewUrlParser: true, useUnifiedTopology: true })
mongoose.Promise = Promise
// Defines the port the app will run on. Defaults to 8080, but can be overridden
// when starting the server. Example command to overwrite PORT env variable value:
// PORT=9000 npm start
const Game = mongoose.model("Game", {
id: Number,
gameOne: String,
gameTwo: String
});
if(process.env.RESET_DB) {
const resetDataBase = async () => {
await Game.deleteMany();
games.forEach(singleGame => {
const newGame = new Game(singleGame);
newGame.save();
})
}
resetDataBase();
}
const port = process.env.PORT || 8080;
const app = express();
// Add middlewares to enable cors and json body parsing
app.use(cors());
app.use(express.json());
// Start defining your routes here
app.get("/", (req, res) => {
res.send({
Welcome:
"This is the API for my final project: A quiz game called StreetSmart.",
Routes: [
{
"/games": "Show all games."
}
],
})
});
// Show all games
app.get("/games", async (req, res) => {
const allGames = await Game.find().sort({"id":1})
res.status(200).json({
success: true,
games: allGames
});
});
// Start the server
app.listen(port, () => {
console.log(`Server running on http://localhost:${port}`);
});