AWS-Amplify : Connect API and database to the app - Property 'data' does not exist on type 'Promise<GraphQLResult<any>> | Observable<object>'

I'm coding an app that need to use an original API and I choose AWS Amplify to do it. I created my GraphQL and I'm trying to display the result of my Query 4. All seemed to be ok when I added my API so I thought the problem happened when I call the API in my HomeScreen.tsx page, l.33 :

setCategories(categoryData.data.listCategorys.items);

It display me this error:

Property 'data' does not exist on type 'Promise<GraphQLResult> | Observable'.

But I didn't find out what I did wrong. My Ios Simulator doesn't have a fatal error but is not displaying anything from my API on my HomePage. Please, if you have an idea to resolve it.

This is HomeScreen.tsx

import * as React from "react";

import {useEffect, useState} from "react";



import { StyleSheet, Image, Text, FlatList, SafeAreaView, View } from "react-native";

import Category from "../components/Category/CategoryIndex";
import Input from "../components/Input/Input";

import {Amplify} from 'aws-amplify';
import { API, graphqlOperation } from 'aws-amplify';

import awsExports from "../src/aws-exports";
Amplify.configure(awsExports);

import { listCategorys } from "../src/graphql/queries";

 import {trackCategories} from "../data/trackCategories";



export default function HomeScreen() {

  const [categories, setCategories] = useState();
  


 useEffect(() => {
  const fetchCategories = async () => {
    try{
      const categoryData = API.graphql(graphqlOperation(listCategorys));
      console.log(categoryData);
      console.log('heyyyy');
      setCategories(categoryData.data.listCategorys.items);
    
    } catch (err) { console.log('error fetching categories') }
  
  }
    fetchCategories();
 }, []);

  return (
    <SafeAreaView style={styles.container}>
      
      <FlatList
        data={categories}
        renderItem={({ item }) => (
          <Category trackList={item.trackList} title={item.title}  />
        )}
        keyExtractor={(item) => item.id}
        ListHeaderComponent = {() => <Input placeholder="Un titre, un artiste..." /> }
      />
    </SafeAreaView>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: "80%",
  },
  description: {
    marginBottom: 20,
    fontSize: 18,
    textAlign: "center",
    color: "#656565",
  },

});

Here the display on my simulator and what it should look like. What it should be

What it is

And here is my API on the AWS Console: QUERY4_AWSCONSOLE_API

My amplify/backend/api/stayfocusmaster/schema.graphql :

type Category @model {
  id: ID!
  title: String!
  trackLists: [TrackList] @connection(keyName: "byCategory", fields: ["id"])
}

type TrackList @model @key(name: "byCategory", fields: ["categoryID"]) {
  id: ID!
  title: String!
  artisteName: String!
  imageUri: String!
  nbLikes: Int!
  categoryID: ID!
  category: Category @connection(fields: ["categoryID"])
  songs: [Song] @connection(keyName: "byTrackList", fields: ["id"])
}

type Song @model @key(name: "byTrackList", fields: ["trackListID", "title"]) {
  id: ID!
  trackListID: ID!
  imageUri: String!
  uri: String!
  title: String!
  artistName: String!
  trackList: TrackList @connection(fields: ["trackListID"])
  
}

and listCategorys in src/graphql/queries.ts :

export const listCategorys = /* GraphQL */ `
  query ListCategorys(
    $filter: ModelCategoryFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listCategorys(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        title
        trackLists {
          nextToken
        }
        createdAt
        updatedAt
      }
      nextToken
    }
  }
`;

Thanks for your help!