[useId] Trade random collisions for collisions on overflow (#29781)

packages/mui-utils/src/useId.ts

@@ -1,14 +1,17 @@
 import * as React from 'react';
 
+let globalId = 0;
 export default function useId(idOverride?: string): string | undefined {
   const [defaultId, setDefaultId] = React.useState(idOverride);
   const id = idOverride || defaultId;
   React.useEffect(() => {
     if (defaultId == null) {
       // Fallback to this default id when possible.
-      // Use the random value for client-side rendering only.
+      // Use the incrementing value for client-side rendering only.
       // We can't use it server-side.
-      setDefaultId(`mui-${Math.round(Math.random() * 1e9)}`);
+      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+      globalId += 1;
+      setDefaultId(`mui-${globalId}`);
     }
   }, [defaultId]);
   return id;