React - Cannot read property 'question_desc' of undefined

I have get these object whenever I click the next or previous button, it'll display like this in my console.log

Here is what I do to get it out console.log(dataQuestion[this.state.step]) (Step is for moving index whenever I click)

But when I add console.log(dataQuestion[this.state.step].question_desc) to get the question_desc out, it'll get Cannot read property 'question_desc' of undefined. I don't know what I'm doing wrong. Can someone give me some answer.

Here's my piece of code.

    class QuizForm extends Component {
    constructor(props){
        super(props)
        this.state={
                step: 0,
                dataQuestion: [],
        }
    }
// ------------------
    componentDidMount(){
            axios.get('http://localhost:3000/quiz/'+this.props.quizID)
            .then(res=>{
                this.setState({
                    dataQuestion: res.data
                })
            })
            .catch(error => console.log(error))
        }
// -------------------
    handleNext = ()=>{
        if (this.state.step === this.state.dataQuestion.length - 1){
            return
        }
    this.setState({step: this.state.step + 1})
    }
    handlePrevious = ()=>{
        if(this.state.step === 0){
            return
        }
    this.setState({step: this.state.step - 1})
    }
// ---------------------
    render(){
            const {dataQuestion} = this.state
                console.log(dataQuestion[this.state.step].question_desc)
        return(
            <>
            <div className="column middle">
            <div className="game-details-container">
                <h1> Question : <span id="question-number"></span> /</h1>
            </div>
                    <div className="game-quiz-container">    
                                        
                        <div className="game-options-container">
                            <span>
                                <input type="radio" id="option-one" name="option" className="radio" value="optionA" />
                                <label htmlFor="option-one" className="option" id="option-one-label">A Answer</label>
                            </span>
                        </div>
                        <div className="next-button-container">
                            <button onClick = {()=>this.handlePrevious()}>Previous Question</button>
                            <button onClick = {()=>this.handleNext()}>Next Question</button>
                        </div>
                    </div>
        </div>
                </>
        );
    }
}