import logo from './logo.svg'; i need to list items from my appsync api in my react app ...i cant display as it says the error its undefined ...which i mentioned bellow the code..i know my code is wrong can somebody guide me

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')**