reactjs - React Graphql Typescript - Propriedade não existe no tipo '{}'

Estou tentando criar um aplicativo simples em React GraphQL, estou usando Strapi para conectar a um MongoDB.

Tudo está funcionando bem e eu estou apenas exibindo nomes de livros com uma consulta para obter todos os livros no MongoDB

Meu problema é com TypeScript - estou recebendo um Property does not exist on type '{}' e não consigo descobrir como consertar isso corretamente.

Eu tenho um componente de consulta

import React, { ReactElement } from 'react';
import { useQuery } from "@apollo/react-hooks";
import { DocumentNode } from 'graphql';

interface IProps{
    children(data:{}): ReactElement;
    query: DocumentNode
    id?: number
}

const Query = ({children, query, id}:IProps) => {
    const {data, loading, error} = useQuery(query, {
        variables:{id:id}
    })

    if(loading) return <p>loading</p>
    if(error) return <p>Error{JSON.stringify(error)}</p>
    return children({data})
}

export default Query

E uma consulta simples

import gql from 'graphql-tag';

export const GET_ALL_BOOKS = gql `
    query Books{
        books{
            name
            description
        }
    }
`

E então, em App.tsx, estou chamando a consulta e exibindo os nomes dos livros

Estou recebendo o erro de TypeScript aqui {({data: {fonts}}) => {

sobre dados - Propriedade 'data' não existe no tipo '{}'.ts(2339)

import React, { ReactElement } from 'react';
import Query from './utils/query'
import { GET_ALL_BOOKS } from './queries';
import {Books} from './generated/Books'
import { DocumentNode } from 'graphql';

interface BookProps{
  _id: string
  name: string
  description: string
}

interface IProps{
  children(data:{}): ReactElement;
  query: DocumentNode
  id?: number
}

interface Query{

}

const App:React.FC = () => {
  return (
    <div className="App">
      <h1>Books</h1>
      <Query query={GET_ALL_BOOKS}>
        {({data: {books}}) => { // typescript error here - Property 'data' does not exist on type '{}'.ts(2339)
          return(
            <ul>
            {books.map((book: { name: string; }, i: number) => {
              return(
                <li>{book.name}</li>
              )
            })}
            </ul>
          )
        }}
      </Query>
    </div>
  );
}

export default App;

Estou gerando tipos a partir da consulta também

/* tslint:disable */
/* eslint-disable */
// @generated
// This file was automatically generated and should not be edited.

// ====================================================
// GraphQL query operation: Books
// ====================================================

export interface Books_books {
  __typename: "Book";
  name: string | null;
  description: string | null;
}

export interface Books {
  bookds: (Books_books | null)[] | null;
}

Como posso corrigir este erro de TypeScript