fix(react): React Compiler strips memoization and causes MenuPortal to re-mount (#2077)

### 💡 Overview
This change removes the use of a randomly generated portal ID and
instead uses a ref backed DOM element as the FloatingPortal root. Using
Math.random() during render is not recommended and causes issues with
some versions of React Compiler since the compiler may strip or reorder
memoization.

Author: jdimovska

eslint.config.mjs

@@ -50,6 +50,7 @@ export default [
       'react/no-unescaped-entities': 'off',
       'react/react-in-jsx-scope': 'off',
       'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/purity': 'error',
       'react-hooks/exhaustive-deps': 'error',
       'react-compiler/react-compiler': 'off',
     },

packages/react-sdk/src/components/Menu/MenuToggle.tsx

@@ -5,7 +5,6 @@ import {
   RefAttributes,
   useContext,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -59,16 +58,13 @@ const MenuPortal = ({
 }: PropsWithChildren<{
   refs: UseFloatingReturn['refs'];
 }>) => {
-  const portalId = useMemo(
-    () => `str-video-portal-${Math.random().toString(36).substring(2, 9)}`,
-    [],
-  );
+  const [portalRoot, setPortalRoot] = useState<HTMLDivElement | null>(null);
 
   return (
     <>
-      <div id={portalId} className="str-video__portal" />
+      <div ref={setPortalRoot} className="str-video__portal" />
       <FloatingOverlay>
-        <FloatingPortal id={portalId}>
+        <FloatingPortal root={portalRoot}>
           <div className="str-video__portal-content" ref={refs.setFloating}>
             {children}
           </div>

sample-apps/react/react-dogfood/package.json

@@ -45,6 +45,7 @@
     "@types/react": "~19.1.17",
     "@types/react-dom": "~19.1.11",
     "@types/yargs": "^17.0.33",
+    "babel-plugin-react-compiler": "^1.0.0",
     "rimraf": "^6.0.1",
     "sass": "^1.93.2"
   }

yarn.lock

@@ -7607,6 +7607,7 @@ __metadata:
     "@types/react-dom": "npm:~19.1.11"
     "@types/yargs": "npm:^17.0.33"
     axios: "npm:^1.12.2"
+    babel-plugin-react-compiler: "npm:^1.0.0"
     clsx: "npm:^2.0.0"
     dotenv: "npm:^16.6.1"
     framer-motion: "npm:^12.23.24"