How to update data coming from `useQuery`

import { getAuthor, createBook } from 'wasp/client/operations'

function MyComponent({ authorId }: { authorId: string; }) {
  const { data: author } = useQuery(getAuthor, { id: authorId }) // populates author with books
  const createNewBookByAuthor = async (authorId: number) => {
    await createBook({ title: "new book!", authorId });
  }

  return <div>
    <button onClick={createNewBookByAuthor}>Create New Book</button>
    <ul>
      {author.books.map(book => {
        <li>
          {book.title}
        </li>
       })}
    </ul>
  </div>
}

import { getAuthor, createBook } from 'wasp/client/operations'

function MyComponent({ authorId }: { authorId: string; }) {
  const { data: author } = useQuery(getAuthor, { id: authorId }) // populates author with books
  const createNewBookByAuthor = async (authorId: number) => {
    await createBook({ title: "new book!", authorId });
  }

  return <div>
    <button onClick={createNewBookByAuthor}>Create New Book</button>
    <ul>
      {author.books.map(book => {
        <li>
          {book.title}
        </li>
       })}
    </ul>
  </div>
}