AWS Appsync Graphql query to get list of items returns empty array even though the dynamodb table has items in it

I'm running an Angular 11 application that is integrated with AWS Amplify and Appsync using GraphQL and dynamoDB for the backend.

This is my Graphql schema:-

type School
  @model
  @auth(
    rules: [{ allow: owner, ownerField: "admins", operations: [update, read] }]
  ) {
  id: ID!
  name: String!
  admins: [Member]
  classes: [Class] @connection(name: "SchoolClasses")
  members: [Member] @connection(name: "SchoolMembers")
}

type Class
  @model
  @auth(
    rules: [{ allow: owner, ownerField: "admins", operations: [update, read] }]
  ) {
  id: ID!
  name: String!
  school: School @connection(name: "SchoolClasses")
  admins: [Member]
  members: [Member] @connection(name: "ClassMembers")
}

type Member @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  name: String!
  school: School @connection(name: "SchoolMembers")
  class: Class @connection(name: "ClassMembers")
}

This is my client definition:-

const client = new AWSAppSyncClient({
  url: awsconfig.aws_appsync_graphqlEndpoint,
  region: awsconfig.aws_appsync_region,
  auth: {
    type: awsconfig.aws_appsync_authenticationType,
    jwtToken: async () =>
      (await Auth.currentSession()).getAccessToken().getJwtToken(),
  },
  complexObjectsCredentials: () => Auth.currentCredentials(),
  cacheOptions: {
    dataIdFromObject: (obj: any) => `${obj.__typename}:${obj.myKey}`,
  },
});

This is my query method:-

    client
      .query({
        query: ListSchools,
      })
      .then((data: any) => {
        console.log('data from listSchools ', data);
        console.log(data.data.listSchools.items);
      });
  };

This is my query definition:-

import gql from 'graphql-tag';

export default gql`
  query ListSchools(
    $filter: ModelSchoolFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listSchools(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        name
        admins {
          id
          name
          createdAt
          updatedAt
          owner
        }
        classes {
          nextToken
        }
        members {
          nextToken
        }
        createdAt
        updatedAt
      }
      nextToken
    }
  }
`;

The output for data in the console looks like this:-

{
   "data":{
      "listSchools":{
         "items":[],
         "nextToken":null,
         "__typename":"ModelSchoolConnection"
      }
   },
   "loading":false,
   "networkStatus":7,
   "stale":false
}

As you can see, the items is an empty array. But currently I have 3 items in my dynamoDB table:-

What am I doing wrong?

I have checked the regions to see if it is querying a different region, but it is checking the correct region, so I should be seeing the results. Also, wouldn't it throw an error if we're querying the wrong table?