fix: update settings state immutably when modifying labels of the scale

package.json

@@ -34,6 +34,7 @@
     "@types/react": "18.2.71",
     "@types/react-dom": "18.2.22",
     "i18next": "23.10.1",
+    "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -72,6 +73,7 @@
     "@cypress/code-coverage": "3.12.32",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/i18n": "0.13.10",
+    "@types/lodash.clonedeep": "^4",
     "@types/lodash.isequal": "^4.5.8",
     "@types/uuid": "9.0.8",
     "@typescript-eslint/eslint-plugin": "7.4.0",

src/modules/settings/LevelsSettings.tsx

@@ -5,6 +5,8 @@ import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 
+import cloneDeep from 'lodash.clonedeep';
+
 import { LevelsSettings } from '@/config/appSettings';
 import { MAX_NUMBER_OF_LEVELS } from '@/config/constants';
 import {
@@ -48,10 +50,11 @@ const LevelsSettingsEdit: FC<{
     }
   };
   const handleLabelChange = (newLabel: string, index: number): void => {
-    labels[index] = newLabel;
+    const newLabels = cloneDeep(labels);
+    newLabels[index] = newLabel;
     onChange({
       levels: numberOfLevels,
-      labels,
+      labels: newLabels,
     });
   };
   return (

yarn.lock

@@ -3179,6 +3179,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash.clonedeep@npm:^4":
+  version: 4.5.9
+  resolution: "@types/lodash.clonedeep@npm:4.5.9"
+  dependencies:
+    "@types/lodash": "npm:*"
+  checksum: 10/ef85512b7dce7a4f981a818ae44d11982907e1f26b5b26bedf0957c35e8591eb8e1d24fa31ca851d4b40e0a1ee88563853d762412691fe5f357e8335cead2325
+  languageName: node
+  linkType: hard
+
 "@types/lodash.isequal@npm:^4.5.8":
   version: 4.5.8
   resolution: "@types/lodash.isequal@npm:4.5.8"
@@ -6479,6 +6488,7 @@ __metadata:
     "@tanstack/react-query-devtools": "npm:^4.36.1"
     "@trivago/prettier-plugin-sort-imports": "npm:^4.3.0"
     "@types/i18n": "npm:0.13.10"
+    "@types/lodash.clonedeep": "npm:^4"
     "@types/lodash.isequal": "npm:^4.5.8"
     "@types/node": "npm:20.11.30"
     "@types/react": "npm:18.2.71"
@@ -6504,6 +6514,7 @@ __metadata:
     eslint-plugin-react-hooks: "npm:4.6.0"
     husky: "npm:9.0.11"
     i18next: "npm:23.10.1"
+    lodash.clonedeep: "npm:^4.5.0"
     lodash.isequal: "npm:^4.5.0"
     miragejs: "npm:^0.1.48"
     nock: "npm:^13.5.1"
@@ -7673,6 +7684,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.clonedeep@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "lodash.clonedeep@npm:4.5.0"
+  checksum: 10/957ed243f84ba6791d4992d5c222ffffca339a3b79dbe81d2eaf0c90504160b500641c5a0f56e27630030b18b8e971ea10b44f928a977d5ced3c8948841b555f
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"