Code Sandbox: https://codesandbox.io/s/frosty-yalow-19k5u7?file=/src/Item.tsx

Problem

I have a tiptap editor (ProseMirror under the hood) component that accepts a content value as props.

This value is first merged with a default JSON object (which is a valid ProseMirror state), then I put this merged object in a Ref object.

Finally the ref object is the initialization state of the editor.

However, When I loop through the data and create multiple editors, they all have the same value (the last one in the data object).

First try:

DEFAULT.content[0].content[0].text = content;

I also tried

const defaultContent = { ...DEFAULT };
defaultContent.content[0].content[0].text = content;

However, if I pass props.content to useRef directly, it works. What am I doing wrong here?