AWS Amplify React GraphQL Client not firing subscription

Question

I'm creating an app using Amplify/AppSync and I want the application to be able to refresh a list of videos whenever it happens.

It's my first time using GraphQL, so I might be missing something, I already googled similarly issues, and most of them actually don't have an answer. I'm using the light AWS Amplify GraphQL Client library, wondering if its worth migrating to AppSync/Apollo, however, the docs state that if you are not needing the caching/offline capabilities you don't need to

I have created my app on AppSync and then generated my queries/mutations/subscriptions using amplify codegen

My subscriptions schema:

type Subscription {
    onCreateVideoOnDemand(
        guid: String,
        thumbNailUrl: [String],
        startTime: String,
        workflowStatus: String,
        srcVideo: String
    ): VideoOnDemand
        @aws_subscribe(mutations: ["createVideoOnDemand"])
    onUpdateVideoOnDemand(
        guid: String,
        thumbNailUrl: [String],
        startTime: String,
        workflowStatus: String,
        srcVideo: String
    ): VideoOnDemand
        @aws_subscribe(mutations: ["updateVideoOnDemand"])
    onDeleteVideoOnDemand(
        guid: String,
        thumbNailUrl: [String],
        startTime: String,
        workflowStatus: String,
        srcVideo: String
    ): VideoOnDemand
        @aws_subscribe(mutations: ["deleteVideoOnDemand"])
}

Then on my code I do the following:

import { Connect } from 'aws-amplify-react';
import { listVideoOnDemands } from './graphql/queries';
import { onCreateVideoOnDemand } from './graphql/subscriptions';

...

        <Connect
          query={graphqlOperation(listVideoOnDemands)}
          subscription={graphqlOperation(onCreateVideoOnDemand)}
          onSubscriptionMsg={(prev, { onCreateVideoOnDemand }) => {
            prev.listVideoOnDemands.items.push(onCreateVideoOnDemand);
            console.log(prev.listVideoOnDemands.items);
            return prev;
          }}
        >
          {({ data: { listVideoOnDemands }, loading, error }) => {
            if (loading) return "Loading"
            if (error) return "Error"
            return <List data={listVideoOnDemands.items} />
        </Connect>

The list is being displayed correctly, except it doesn't update when I create a new item on the database (it works if I manually refresh the page, of course). To create a new item on the database I'm going to AWS AppSync console -> queries -> then running the createVideoOnDemand there... the row is successfully added to the DynamoDB Table, however, it doesn't trigger the event on my code, the line console.log(prev.listVideoOnDemands.items); is never being called.

I also tried not using <Connect />, using the subscribe method on the useEffect call instead (for componentWillMount event), like showed here, didn't make any difference.

Any idea why is it happening?

PS: I also want to integrate more subscriptions on the Connect, but I couldn't find any information regarding if it is possible or not, only one question here, with no answer so far.