Making a nested property collaborative rich text editor

[Siddhartha]

I have a synced store like this.

  doc {
    common: {
       ...
    }
    blocks: [
       {
          id: 1, 
          data: {
             content: {
               hero: {
                   body: "some content"  <--- I want this to be collaborative XmlFragment
               } 
            }
          }
       }
     ....
     ]
  }

I want to make doc.blocks[0].data.content.hero.body a rich text editor content, and assign it to TipTap, for some reason I was not able to do this.

  const collaborationConfig = useMemo(
    () => ({
      document: provider.document,
      field: `blocks-0-data-content-hero-body`,
    }),
    [id]
  );

but the problem with this approach is I end up strong the text content in two places, one directly on the root with the key blocks-0-data-content-hero-body and the JSON/HTML output in store store.blocks[0].data.content.hero.body.

How can i avoid and what are some ways to do this.