React axios get return empty array - reactjs

Question

As I mentioned, console.log print only empty array. I think the problem will related with async problem.
This is the error what I got.
So, I make delay in axios, return with isLoading but still not working.
Has any solution? Thanks for help!
Test.js(parent component, every state in here) -> MainTest.js -> Question.js
Test.js
import React, { useState, useEffect } from "react";
import Tutorial from "../Tutorial";
import MainTest from "../MainTest";
import axios from "axios";
const Test = () => {
const [count, setCount] = useState(0);
const [questionNum, setQuestionNum] = useState(0);
const [questionList, setQuestionList] = useState([]);
useEffect(() => {
axios.get("http://localhost:3001/get/question").then((response) => {
setQuestionList(response.data);
})
}, []);
const questionHandler = () => {
setQuestionNum(questionNum + 1);
setCount(count + 1);
};
return (
<div>
<MainTest
questionList={questionList}
questionNum={questionNum}
questionHandler={questionHandler}
/>
</div>
);
};
export default Test;
MainTest.js
import React from 'react'
import styled from 'styled-components'
import ProgBar from './ProgBar'
import Question from './Question'
import SelectSec from './SelectSec'
function MainTest({questionList, questionNum, questionHandler}) {
return (
<TestWrap>
<ProgBar />
<Question questionList={questionList[questionNum]}/>
<SelectSec questionList={questionList[questionNum]} questionHandler={questionHandler}/>
</TestWrap>
)
}
export default MainTest
const TestWrap = styled.div`
width: 100vh;
height: 100vh;
background-image: url("./images/background/background.png");
`;
Question.js
import React from "react";
import Styled from "styled-components";
function Question({questionList}) {
console.log(questionList)
return (
<QuestionWrap>
<i className="far fa-calendar-alt"></i>
<h3>
{questionList.question.split('</br>').map(line => {
return(<>{line}<br/></>)
})}
</h3>
</QuestionWrap>
);
}
export default Question;
const QuestionWrap = Styled.div `
width: 100%;
height: 55%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
i{
color: #b56467;
font-size: 2rem;
margin-bottom: 2rem;
}
h3 {
text-align: center;
font-family: "UhBeeBEOJJI";
color: #3a1a00;
font-size: 2.7rem;
line-height: 3.4rem;
}
`;

Answer 1

in your Question component you need to had a condition in the return like:
function Question({questionList}) {
console.log(questionList)
return (
<QuestionWrap>
<i className="far fa-calendar-alt"></i>
<h3>
{questionList & questionList.question && questionList.question.split('</br>').map(line => {
return(<>{line}<br/></>)
})}
</h3>
</QuestionWrap>
);
}
export default Question;