AWS AppSynch GraphQL Connecting API to Front End setup error: undefined

I followed AWS's AppSynch tutorial and successfully setup the sample Todo project from the tutorial. Now I'm trying to apply the same steps with a different schema to work with my project. I edited the schema, deployed the API and was able to make several test queries and mutations with both the AppSynch console and a mock API.

I'm running into problems with connecting my API to my front end though. I'm getting errors for all of my API request. The only thing that I changed in my process was that I edited the schema so I'm not sure if that is where I made a mistake. Since the test queries / mutations were successful does that mean my API is likely fine and the issue exist within my code? Is it necessary that I pay for an AWS support plan to work through this issue?

I'm new to AWS and GraphQL so some of the information that I provided below might be overkill. If I need to add any additional information I will be happy to. I appreciate your help and thank you for your time!

listEntries error:

TypeError: Cannot read properties of undefined (reading 'items')

createEntry error:

The variables input contains a field name 'entry' …defined for input object type 'CreateEntryInput'

Tutorial reference:

https://docs.amplify.aws/start/getting-started/data-model/q/integration/react/#optional-test-your-api

mutations.js:

   export const createEntry = /* GraphQL */ `
  mutation CreateEntry(
    $input: CreateEntryInput!
    $condition: ModelEntryConditionInput
  ) {
    createEntry(input: $input, condition: $condition) {
      id
      content
      title
      topic
      createdAt
      updatedAt
    }
  }
`;

queries.js:

     export const listEntries = /* GraphQL */ `
  query ListEntries(
    $filter: ModelEntryFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listEntries(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        content
        title
        topic
        createdAt
        updatedAt
      }
      nextToken
    }
  }
`;

schema.graphql:

  type Entry @model {
  id: ID!
  content: String!
  title: String
  topic: String!
}

React.js Code:

import React, { useRef, useState, useEffect } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import awsExports from "../aws-exports";
import { withAuthenticator} from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import { Amplify, API, graphqlOperation } from 'aws-amplify'
import { createEntry} from '../graphql/mutations.js';
import { listEntries } from '../graphql/queries.js';
    Amplify.configure(awsExports);
    const initialState = { id: 0, entry: '', title: '', topic: '', date:''}
    export default function App() {
    const [formState, setFormState] = useState(initialState) 
    const [entryContent, setEntry] = useState([]
 
    useEffect(() => {
        fetch()
      }, [])
   
      async function fetch() {
        try {
          const entryData = await API.graphql(graphqlOperation(listEntries))
          const entryContent = entryData.data.list.items
          setEntry(entryContent)
        } catch (err) { console.log(err) }
      }
 
      function setInput(key, value) {
        setFormState({ ...formState, [key]: value })
      }
 
      async function addEntry() {
        try {
          const entry = { ...formState }
          setEntry([...entryContent, entry])
          setFormState(initialState)
          await API.graphql(graphqlOperation(createEntry, {input: entry}))
        } catch (err) {
          console.log(err)
        }
      }
    
    const editorRef = useRef();
    const [entryArray, setEntryArray] = React.useState(); // ORIGINAL
    //const updatedList = [...entryArray]
    const log = () => {
      if (editorRef.current) {
        setEntryArray(editorRef.current.getContent());
            setInput('entry', entryArray )
            addEntry()
      }
    };
 
    return (
    <>
    <Editor
        onInit={(evt, editor) => editorRef.current = editor}
        initialValue='<p>This is the initial content of the editor.</p>'
        disabled = {false}
        inline = {false}
        init={{
          selector: "#entryEdi",
          height: 500,
          menubar: false,
          placeholder: "Whats on your mind?",
          plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
          ],
          toolbar:  'undo redo | blocks | ' +
                'bold italic forecolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help',
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        }}
        />
        <button onClick={log}>Log editor content</button>
      </>
    );
  }

Test Queries:

Amplify mock api: