Clone element work only after serialize and deserialize

Describe the bug A little bit of context, in https://github.com/prevwong/craft.js/issues/144 the first solution for cloning elements causes linked cloned nodes to change props to the original ones, https://github.com/prevwong/craft.js/issues/144#issuecomment-788700366 seems to have the same problem, but actually the nodes ids are changed and if we deserialize a serialized state editor inside a setTimeout function it works. To Reproduce Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/epic-colden-giwsw
2. Select a button, on the settings panel under delete click clone
3. Try to changes some props to the cloned element
4. You can see that props are changed to the original one.
5. Now uncomment line 87 on settings panel https://codesandbox.io/s/epic-colden-giwsw?file=/components/SettingsPanel.js:2258-2268
6. Now the clone function works

Expected behavior Cloning an element and run actions.addNodeTree should load the correct data.

[nicosh]

Here is a working function for cloning elements (sandbox) :

  const getCloneTree = useCallback((idToClone) => {
   const tree = query.node(idToClone).toNodeTree();
   const newNodes = {};

   const changeNodeId = (node, newParentId) => {
     const newNodeId = shortid();
     const childNodes = node.data.nodes.map((childId) => changeNodeId(tree.nodes[childId], newNodeId));
     const linkedNodes = Object.keys(node.data.linkedNodes).reduce(
       (accum, id) => {
         const newNodeId = changeNodeId(
           tree.nodes[node.data.linkedNodes[id]],
           newNodeId,
         );
         return {
           ...accum,
           [id]: newNodeId,
         };
       },
       {},
     );

     let tmpNode = {
       ...node,
       id: newNodeId,
       data: {
         ...node.data,
         parent: newParentId || node.data.parent,
         nodes: childNodes,
         linkedNodes,
       },
     };
     let freshnode = query.parseFreshNode(tmpNode).toNode()
     newNodes[newNodeId] = freshnode
     return newNodeId;
   };

   const rootNodeId = changeNodeId(tree.nodes[tree.rootNodeId]);
   return {
     rootNodeId,
     nodes: newNodes,
   };
 }, []);

The problem was this piece of code that i guess did not update the internal state :

      newNodes[newNodeId] = {
        ...node,
        id: newNodeId,
        data: {
          ...node.data,
          parent: newParentId || node.data.parent,
          nodes: childNodes,
          linkedNodes
        }
      };

While using query.parseFreshNode seems to work fine :

      let tmpNode = {
        ...node,
        id: newNodeId,
        data: {
          ...node.data,
          parent: newParentId || node.data.parent,
          nodes: childNodes,
          linkedNodes,
        },
      };
      let freshnode = query.parseFreshNode(tmpNode).toNode()

[PurviJha]

This is awsome solution to our problem but there is a bug i face .After deserializing the json, drag and drop stopped working It has unexpected behaviour .while checking the official example(basic one) when click on lode state it deserialize the json and drag and drop stopped working while switch on and off enable button drag and drop started working .May be this is not the solution but its a quick fix