Fix error where nested objects are immutable

Author: mau11

src/components/AssignmentTexter/Controls.jsx

@@ -35,6 +35,7 @@ import {
 import { dataTest } from "../../lib/attributes";
 import ContactToolbar from "./ContactToolbar";
 import { getCookie, setCookie } from "../../lib/cookie";
+import { deepCopy } from "../utils";
 
 export class AssignmentTexterContactControls extends React.Component {
   constructor(props) {
@@ -124,7 +125,10 @@ export class AssignmentTexterContactControls extends React.Component {
     let currentInteractionStep = null;
 
     if (availableSteps.length > 0) {
-      currentInteractionStep = availableSteps[availableSteps.length - 1];
+      const currentInteractionStep = deepCopy(
+        availableSteps[availableSteps.length - 1]
+      );
+
       currentInteractionStep.question.filteredAnswerOptions =
         currentInteractionStep.question.answerOptions;
     }

src/components/utils.jsx

@@ -27,3 +27,16 @@ export function getButtonProps(props) {
   ];
   return pick(props, validProps);
 }
+
+// Create a deep copy of an object so nested properties are also mutable
+export function deepCopy(obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(item => deepCopy(item));
+  } else if (typeof obj === "object" && obj !== null) {
+    return Object.fromEntries(
+      Object.entries(obj).map(([key, value]) => [key, deepCopy(value)])
+    );
+  } else {
+    return obj;
+  }
+}