importar logotipo desde './logo.svg'; Necesito enumerar los elementos de mi api de appsync en mi aplicación de reacción... no puedo mostrarlos porque dice que el error no está definido... que mencioné debajo del código... sé que mi código es incorrecto, ¿alguien puede guiarme?

 import React, { useState } from "react"; import { API, graphqlOperation } from 'aws-amplify'; import { listTestModels } from "./graphql/queries/list"; import './App.css'; function App() { const [list, setBook] = useState(null); const getBook = async () => { // make a call to appsync api const list = await API.graphql(graphqlOperation(listTestModels)); setBook(list.data.listTestModels.items); } const viewBook = () => { if (list) { **it shows error after this ** return (<article> <h3>{list.data.listTestModels.items}</h3> <p>{list.Location}</p> <p>{list.Email}</p> </article>) } } return ( <div> <section className="book-section"> <button onClick={() => getBook()}>Get book details</button> <hr /> {viewBook()} </section> </div> ); } export default App;``` **it shows error App.js:24 Uncaught TypeError: Cannot read properties of undefined (reading 'listTestModels')**