Как использовать setState с API-интерфейсом для отправки формы в React?

Я новичок в React и хотел поиграть с fetchAPI. Я хочу использовать API GoogleBooks для отображения списка книг, соответствующих строке запроса, которую пользователь может ввести в поле ввода.

Мне удалось сделать вызов API Google и использовать setState, но я не могу сохранить состояние. Если я хочу отобразить состояние после извлечения данных, состояние отображается как неопределенное.

У меня такое ощущение, что React сначала отображает HTML, а затем устанавливает состояние после вызова API.

Я был бы признателен, если бы вы могли взглянуть на мой компонент.

Спасибо!

import React, {Component} from 'react'

class Search extends Component{
 constructor(props){
super(props)
this.state = {
  books: []

}
this.books = this.state.book
this.title = ''
this.handleChangeEvent = (e) => {
  this.title = e.target.value

}
this.handleSubmit = (e) => {
  let results = '';
  e.preventDefault();
  const apiKey = 'AIzaSyBuR7JI6Quo9aOc4_ij9gEqoqHtPl-t82g'
  fetch(`https://www.googleapis.com/books/v1/volumes?q=${this.title}&key=${apiKey}`)
  .then(response => response.json()).then(jsonData => {
    this.setState({
      books: jsonData
    })
    console.info(jsonData)
  })

}
}
 render(){

return(
  <div className = "col-md-12">
    <form onSubmit = {this.handleSubmit} className = "form-group">
    <label>Enter title</label>
    <input onChange = {this.handleChangeEvent} className = "form-control" ref = "title" type = "text" placeholder = "Enter title"></input>
    <button  type = "submit" className = "btn btn-primary">Submit</button>
    </form>
    <div>
      <li>this.state.books</li>
    </div>
  </div>