diff --git a/client/package.json b/client/package.json
index 9cfb1ed1e5..9a4553c86e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -56,7 +56,7 @@
     "next": "13.5.5",
     "next-auth": "4.19.2",
     "pino": "8.1.0",
-    "postcss": "8.3.6",
+    "postcss": "8.4.31",
     "query-string": "8.1.0",
     "rc-tree": "5.7.0",
     "react": "18.2.0",
@@ -82,6 +82,7 @@
     "@types/node": "16.11.6",
     "@types/react": "18.2.28",
     "@types/react-dom": "18.2.13",
+    "@types/uuid": "^9.0.5",
     "@typescript-eslint/eslint-plugin": "6.8.0",
     "@typescript-eslint/parser": "6.8.0",
     "cypress": "13.2.0",
diff --git a/client/src/hooks/sourcing-locations/index.ts b/client/src/hooks/sourcing-locations/index.ts
index 4d99bc70d5..2938ce4514 100644
--- a/client/src/hooks/sourcing-locations/index.ts
+++ b/client/src/hooks/sourcing-locations/index.ts
@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { merge } from 'lodash-es';
+import { v4 as uuidv4 } from 'uuid';
 
 import apiService from 'services/api';
 
@@ -91,7 +92,7 @@ export function useSourcingLocationsMaterials(
           // duplicate rows when updating the table data. A workaround is to generate uuids.
           // We won't be loading many rows at once so it shouldn't be a huge performance hit.
           ((response as SourcingLocationsMaterialsAPIResponse).data || []).map((data) => ({
-            // id: uuidv4(),
+            id: uuidv4(),
             ...data,
           })) || [],
         meta: (response as SourcingLocationsMaterialsAPIResponse).meta || {},
diff --git a/client/yarn.lock b/client/yarn.lock
index 8fa920dd29..fc7a4dfbed 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2020,6 +2020,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/uuid@npm:^9.0.5":
+  version: 9.0.5
+  resolution: "@types/uuid@npm:9.0.5"
+  checksum: 7577940949619768303c0bf0a7cc235fac3cfae1c0bb4a2e85bfb87b2eb1024955ab446f775394d259442cd769b663b6ce43c39bdfc955d946bf833804ddb421
+  languageName: node
+  linkType: hard
+
 "@types/yauzl@npm:^2.9.1":
   version: 2.10.0
   resolution: "@types/yauzl@npm:2.10.0"
@@ -6474,6 +6481,7 @@ __metadata:
     "@types/node": 16.11.6
     "@types/react": 18.2.28
     "@types/react-dom": 18.2.13
+    "@types/uuid": ^9.0.5
     "@typescript-eslint/eslint-plugin": 6.8.0
     "@typescript-eslint/parser": 6.8.0
     autoprefixer: 10.2.5
@@ -6502,7 +6510,7 @@ __metadata:
     nyc: 15.1.0
     nyc-report-lcov-absolute: 1.0.0
     pino: 8.1.0
-    postcss: 8.3.6
+    postcss: 8.4.31
     prettier: 2.8.3
     query-string: 8.1.0
     rc-tree: 5.7.0
@@ -7079,15 +7087,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.1.23":
-  version: 3.3.4
-  resolution: "nanoid@npm:3.3.4"
-  bin:
-    nanoid: bin/nanoid.cjs
-  checksum: 2fddd6dee994b7676f008d3ffa4ab16035a754f4bb586c61df5a22cf8c8c94017aadd360368f47d653829e0569a92b129979152ff97af23a558331e47e37cd9c
-  languageName: node
-  linkType: hard
-
 "nanoid@npm:^3.3.6":
   version: 3.3.6
   resolution: "nanoid@npm:3.3.6"
@@ -7868,17 +7867,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:8.3.6":
-  version: 8.3.6
-  resolution: "postcss@npm:8.3.6"
-  dependencies:
-    colorette: ^1.2.2
-    nanoid: ^3.1.23
-    source-map-js: ^0.6.2
-  checksum: ff55b91bea21f42c2a94d77fd05c3f66dd15889c68506cf1dbb9cdee8c3b9e9d0e219bcbc6e61a107bd63e3cac0670176486e2a5794c106a4e1b9babceb79317
-  languageName: node
-  linkType: hard
-
 "postcss@npm:8.4.31":
   version: 8.4.31
   resolution: "postcss@npm:8.4.31"
@@ -9180,13 +9168,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^0.6.2":
-  version: 0.6.2
-  resolution: "source-map-js@npm:0.6.2"
-  checksum: 9c8151a29e00fd8d3ba87709fdf9a9ce48313d653f4a29a39b4ae53d346ac79e005de624796ff42eff55cbaf26d2e87f4466001ca87831d400d818c5cf146a0e
-  languageName: node
-  linkType: hard
-
 "source-map-js@npm:^1.0.2":
   version: 1.0.2
   resolution: "source-map-js@npm:1.0.2"