Clone nodes (deep) before mutating them, otherwise it breaks the reac…

…t state update

package.json

@@ -9,10 +9,12 @@
   "dependencies": {
     "@emotion/react": "11.1.4",
     "@emotion/styled": "11.0.0",
+    "@types/lodash.clonedeep": "4.5.6",
     "@unly/utils": "1.0.3",
     "@welldone-software/why-did-you-render": "6.0.5",
     "classnames": "2.2.6",
     "framer-motion": "3.2.1",
+    "lodash.clonedeep": "4.5.0",
     "next": "10.0.6",
     "rdk": "5.0.6",
     "react": "17.0.1",

src/components/PlaygroundContainer.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import cloneDeep from 'lodash.clonedeep';
 import React, { MutableRefObject } from 'react';
 import {
   Canvas,
@@ -105,7 +106,7 @@ const PlaygroundContainer: React.FunctionComponent<Props> = (props): JSX.Element
             };
             console.log('updateCurrentNode updated node', nodeToUpdate);
 
-            const newNodes = nodes;
+            const newNodes = cloneDeep(nodes);
             newNodes[nodeToUpdateIndex] = nodeToUpdate;
             console.log('updateCurrentNode new nodes', newNodes);
 

yarn.lock

@@ -314,6 +314,18 @@
   resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.11.tgz#2521cc86f69d15c5b90664e4829d84566052c1cf"
   integrity sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==
 
+"@types/lodash.clonedeep@4.5.6":
+  version "4.5.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.clonedeep/-/lodash.clonedeep-4.5.6.tgz#3b6c40a0affe0799a2ce823b440a6cf33571d32b"
+  integrity sha512-cE1jYr2dEg1wBImvXlNtp0xDoS79rfEdGozQVgliDZj1uERH4k+rmEMTudP9b4VQ8O6nRb5gPqft0QzEQGMQgA==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.168"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
+  integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
+
 "@types/node@14.14.22":
   version "14.14.22"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.22.tgz#0d29f382472c4ccf3bd96ff0ce47daf5b7b84b18"
@@ -1545,6 +1557,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.clonedeep@4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"