Copy paste Complex Custom React Extension not working

[Snivio]

Got a complex react extension that displays a list of images Like

But when I try to copy paste the component seems to disappear.

My extension index file

import { mergeAttributes, Node } from '@tiptap/core';
import { ReactNodeViewRenderer } from '@tiptap/react';
import { BodyImages } from './BodyImages';
import { clone } from 'lodash';
import { editorExtension } from '../register-extensions';

export const ImageNode = Node.create({
  name: editorExtension.BodyImages,

  addOptions() {
    return {
      HTMLAttributes: {},
    };
  },

  group: 'block',
  content: 'inline*',
  draggable: true,
  isolating: true,
  atom: true,

  addAttributes() {
    return {
      value: {
        default: [],
      },
    };
  },

  parseHTML() {
    return [
      {
        tag: 'body-item-node',
        contentElement: editorExtension.BodyImages,
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    return ['body-item-node', mergeAttributes(HTMLAttributes)];
  },
  addNodeView() {
    return ReactNodeViewRenderer(BodyImages);
  },
  addCommands(): any {
    return {
      setBodyImage:
        () =>
        ({ chain }: any) =>
          chain()
            .insertContent({
              type: this.name,
            })
            .createParagraphNear()
            .run(),
    };
  },

  toMarkdown() {
    return '';
  },
});

And my inner functions is

export const BodyImages: FC<any> = (props: any) => {
.....
.....
  ///Render Component
  let { value } = props.node.attrs;
  return (
    <NodeViewWrapper
      className=""
      contentEditable={false}
      data-testid="editor-image:body-image"
    >
      <Group
        position="center"
        grow
        style={{ alignItems: 'start' }}
        data-type="body-item-node"
      >
        {(value as BodyNodeImages[]).map(({ image }, index) => (
          <Image
            key={index}
            image={image}
            onEmpty={() => handleEvent(BodyImageEvents.EMPTY, index)}
            onChange={val => handleEvent(BodyImageEvents.CHANGE, index, val)}
            onEdit={() => handleEvent(BodyImageEvents.UPDATE_IMAGE, index)}
            onAdd={
              value.length !== 4
                ? () => handleEvent(BodyImageEvents.ADD_ITEM, index)
                : undefined
            }
          />
        ))}
      </Group>
    </NodeViewWrapper>
  );
};

How to enable Copy paste for complex react components and also proper output HTML for a tip tap extension ?

HTML output right now

<body-item-node value=\"[object Object]\"></body-item-node>

[andreasvirkus]

If your custom node is an atom, you can implement a renderText (https://tiptap.dev/docs/editor/core-concepts/schema#content)

renderText({ node }) {
  return `<body-item-node prop="${node.attrs.id}"></body-item-node>`
},