Help! got Multiple rendering data query after fetchmore with subscription

Help
,
1

next-dev.js?3515:32 Warning: Encountered two children with the same key, cl0qi49oc02231kl3do54qgna

I have some query comments, and inside query comments it have comments again
so its look like

  getComments(postId: $postId, after: $after, pageSize: $pageSize) {
    count
    cursor
    hasMore
    comments {
      id
      text
      date
      user {
        id
        name
        username
      }
      comments {
        id
        text
        date
      }
    }

and my subscription is


  subscription commentCreated($postId: ID!) {
    commentCreated(postId: $postId) {
      id
      text
      date
      user {
        id
        name
        username
      }
      comments {
        id
        text
        date
      }
    }
  }

my schema


  type Comment {
    id: ID!
    text: String!
    user: User!
    post: Post!
    date: DateTime
    comments: [CommentsFromComents]
  }

  type CommentsFromComents {
    id: ID!
    text: String!
    user: User!
    date: DateTime
  }

my code inside frontend

  const { data, loading, fetchMore, subscribeToMore, error } =
    useGetCommentsQuery({
      variables: {
        postId: String(id),
        pageSize: 7,
      },
    });

  useEffect(() => {
    const unsubscribe = subscribeToMore({
      document: COMMENT_SUBSCRIPTION,
      variables: {
        postId: String(id),
      },

      updateQuery: (prev: any, { subscriptionData }: any) => {
        if (!subscriptionData.data) return prev;

        const subscriptionResponse = subscriptionData.data.commentCreated;

        const newCache = Object.assign({}, prev, {
          getComments: {
            count: prev.getComments.count,
            hasMore: prev.getComments.hasMore,
            cursor: prev.getComments.cursor,
            comments: [subscriptionResponse, ...prev.getComments.comments],
          },
        });

        return newCache;
      },
    });

    return () => {
      unsubscribe();
    };
  }, [subscribeToMore, id]);

Type policies

 getComments: {
          keyArgs: ["postId"],
          merge(existing, incoming, { args }) {
            if (existing === undefined) {
              return incoming;
            }

            if (args.after && existing.comments) {
              return Object.assign({}, incoming, {
                comments: [...existing.comments, ...incoming.comments],
              });
            } else {
              return incoming;
            }
          },

Please help …