RTK query with Amplify Graphql subscribe

Question

I am trying to build livechat with react native + rtk query + amplify. I can send the message through mutation and receive the first message through query.

Now I want to add subscribe onCreate to receive the livechat when other user sends the message.

Below is my code

onReceiveChat: builder.mutation({
            queryFn: async ({ id }, _api, _extraOptions, fetchWithBQ) => {
                try {
                    const variables = {
                        id: {
                          type: { eq: id }
                        }
                    }
                    const sub = API.graphql(
                        graphqlOperation(onCreateLiveChat, variables)
                    ).subscribe({
                        next: ({ provider, value }) => {
                            console.log('onReceiveChat next', { provider, value })
                            return {
                                data: value
                            }
                        },
                        error: error => {
                            console.warn(error)
                            throw error
                        }
                    });
                    
                } catch (error) {
                    console.log('error receiveChat', error);
                    throw error
                }
            },
            invalidatesTags: ["chat"]
        }),

useEffect(() => {
        setInterval(() => {
            const { data } = onCreateLiveChat({ id })
            console.log('useOnReceiveChatQuery data', data)
        }, 500)
    },[])

However, I do not think this is correct way to implement.

Could you have any guidance for this? Thanks