Stabilise React useId values in DOM snapshots in element-web (#33579)

* Stabilise React useId values in DOM snapshots - app/web

* Stabilise React useId values in DOM snapshots - shared components

* Update additional snapshots

* Added comments and changed replace pattern to 'react-use-id-N'

packages/shared-components/src/core/pill-input/Pill/__snapshots__/Pill.test.tsx.snap

@@ -11,12 +11,12 @@ exports[`Pill > renders the pill 1`] = `
     />
     <span
       class="Pill-module_label"
-      id="_r_0_"
+      id="react-use-id-1"
     >
       Pill
     </span>
     <button
-      aria-describedby="_r_0_"
+      aria-describedby="react-use-id-1"
       aria-label="Delete"
       class="_icon-button_1215g_8 mx_Dialog_nonDialogButton"
       data-kind="primary"
@@ -56,7 +56,7 @@ exports[`Pill > renders the pill without close button 1`] = `
     />
     <span
       class="Pill-module_label"
-      id="_r_1_"
+      id="react-use-id-1"
     >
       Pill
     </span>

packages/shared-components/src/core/rich-list/RichList/__snapshots__/RichList.test.tsx.snap

@@ -11,12 +11,12 @@ exports[`RichItem > renders the list 1`] = `
     >
       <span
         class="RichList-module_title"
-        id="_r_0_"
+        id="react-use-id-1"
       >
         Rich List Title
       </span>
       <ul
-        aria-labelledby="_r_0_"
+        aria-labelledby="react-use-id-1"
         class="RichList-module_content"
         role="listbox"
         tabindex="0"
@@ -174,7 +174,7 @@ exports[`RichItem > renders the list with isEmpty=true 1`] = `
     >
       <span
         class="RichList-module_title"
-        id="_r_1_"
+        id="react-use-id-1"
       >
         Rich List Title
       </span>