React - dynamic index of array. Giving undefined for object key - reactjs

Question

I have a component that is collecting an array of objects from .json
function DisplaySingleQuestion() {
const [ displaySingleQuestion, setDisplaySingleQuestion ] = useState([]);
const [ questionNumber, setQuestionNumber ] = useState(0);
const [currentQuestion, setCurrentQuestion ] = useState("");
useEffect(() => {
fetch("./database/questions.json").then(
async resp => await resp.json()
).then(
data => setDisplaySingleQuestion(data.questions)
)
.catch(
err => console.log(err)
)
}, []);
useEffect(() => {
setCurrentQuestion(displaySingleQuestion[questionNumber])
}, [displaySingleQuestion]);
console.log(currentQuestion.question);
return (
<div>
<p>to jest Single Question</p>
<div style={{backgroundColor: "red"}}>
{/* <p>{displaySingleQuestion[questionNumber].question}</p> */}
</div>
</div>
)
}
If I ask for a specific array index it works well.
For example: displaySingleQuestion[0].question shows the right string.
If instead I get the 0 from the state, it gives undefined.
The component above gives undefined on console.log(currentQuestion.question);
However if I run console.log(currentQuestion); it shows the object in question:
{id: 1, question: "Question text?"}
id: 1question: "Question text?"
[[Prototype]]: Object
The JSON looks like this:
{
"questions": [
{
"id": 1,
"question": "Question text?"
},
{
"id": 2,
"question": "Banan??"
},
{
"id": 3,
"question": "Cytryna?"
},
{
"id": 4,
"question": "Dynia?"
},
{
"id": 5,
"question": "Eukaliptus?"
}
]
}
Why can't I select the question key by calling displaySingleQuestion[questionNumber].question?
What am I doing wrong, and how to fix it?
Thank you