diff --git a/packages/roomkit-react/package.json b/packages/roomkit-react/package.json
index 26418d1837..5acdc5fef9 100644
--- a/packages/roomkit-react/package.json
+++ b/packages/roomkit-react/package.json
@@ -63,6 +63,7 @@
     "@types/mdx": "2.0.2",
     "@types/react": "^18.1.0",
     "@types/react-window": "^1.8.5",
+    "@types/uuid": "^8.3.0",
     "babel-loader": "^8.2.5",
     "babel-plugin-react-require": "3.1.3",
     "react": "^18.1.0",
diff --git a/packages/roomkit-react/src/Theme/stitches.config.ts b/packages/roomkit-react/src/Theme/stitches.config.ts
index 4c14ce8b14..d5197962d3 100644
--- a/packages/roomkit-react/src/Theme/stitches.config.ts
+++ b/packages/roomkit-react/src/Theme/stitches.config.ts
@@ -1,11 +1,11 @@
 import type * as Stitches from '@stitches/react';
 import { createStitches } from '@stitches/react';
-import { randomUUID } from 'crypto';
 import merge from 'lodash.merge';
+import { v4 as uuidv4 } from 'uuid';
 import { baseConfig, defaultMedia, defaultThemeMap, defaultUtils } from './base.config';
 
 const HmsStitches = createStitches({
-  prefix: `hms-ui-${randomUUID()}`,
+  prefix: `hms-ui-${uuidv4()}`,
   theme: {
     ...baseConfig.theme,
     colors: {