diff --git a/.changeset/little-apples-own.md b/.changeset/little-apples-own.md
new file mode 100644
index 00000000000..de440a51e52
--- /dev/null
+++ b/.changeset/little-apples-own.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update SSRProvider, useSSRSafeId to use the native React 18 useId() instead of @react-aria/ssr
diff --git a/.eslintrc.js b/.eslintrc.js
index b8784d93e39..7c5cb359fcb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -138,11 +138,6 @@ module.exports = {
           'error',
           {
             paths: [
-              {
-                name: '@react-aria/ssr',
-                importNames: ['useSSRSafeId'],
-                message: 'Please use the `useId` hook from `src/hooks/useId.ts` instead',
-              },
               {
                 name: 'react',
                 importNames: ['useLayoutEffect'],
diff --git a/package-lock.json b/package-lock.json
index b7f50fdd03b..88467d3745f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,6 @@
         "@primer/behaviors": "^1.5.1",
         "@primer/octicons-react": "^19.8.0",
         "@primer/primitives": "^7.11.11",
-        "@react-aria/ssr": "^3.5.0",
         "@styled-system/css": "^5.1.5",
         "@styled-system/props": "^5.1.5",
         "@styled-system/theme-get": "^5.1.2",
@@ -6723,17 +6722,6 @@
         "@babel/runtime": "^7.13.10"
       }
     },
-    "node_modules/@react-aria/ssr": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.5.0.tgz",
-      "integrity": "sha512-h0MJdSWOd1qObLnJ8mprU31wI8tmKFJMuwT22MpWq6psisOOZaga6Ml4u6Ee6M6duWWISjXvqO4Sb/J0PBA+nQ==",
-      "dependencies": {
-        "@swc/helpers": "^0.4.14"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
     "node_modules/@react-dnd/asap": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
@@ -13240,14 +13228,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@swc/helpers": {
-      "version": "0.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
-      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
@@ -40102,7 +40082,8 @@
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
diff --git a/package.json b/package.json
index 886af52e34a..017f538bca5 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,6 @@
     "@primer/behaviors": "^1.5.1",
     "@primer/octicons-react": "^19.8.0",
     "@primer/primitives": "^7.11.11",
-    "@react-aria/ssr": "^3.5.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index fbbcd726f81..c9d6cf86b56 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -313,10 +313,10 @@ exports[`NavList renders a simple list 1`] = `
       >
         <a
           aria-current="page"
-          aria-labelledby="react-aria-2--label "
+          aria-labelledby=":r1:--label "
           class="c3 c4"
           href="/"
-          id="react-aria-2"
+          id=":r1:"
           tabindex="0"
         >
           <div
@@ -325,7 +325,7 @@ exports[`NavList renders a simple list 1`] = `
           >
             <span
               class="c6"
-              id="react-aria-2--label"
+              id=":r1:--label"
             >
               Home
             </span>
@@ -336,10 +336,10 @@ exports[`NavList renders a simple list 1`] = `
         class="c1 c7"
       >
         <a
-          aria-labelledby="react-aria-3--label "
+          aria-labelledby=":r2:--label "
           class="c3 c4"
           href="/about"
-          id="react-aria-3"
+          id=":r2:"
           tabindex="0"
         >
           <div
@@ -348,7 +348,7 @@ exports[`NavList renders a simple list 1`] = `
           >
             <span
               class="c6"
-              id="react-aria-3--label"
+              id=":r2:--label"
             >
               About
             </span>
@@ -359,10 +359,10 @@ exports[`NavList renders a simple list 1`] = `
         class="c1 c7"
       >
         <a
-          aria-labelledby="react-aria-4--label "
+          aria-labelledby=":r3:--label "
           class="c3 c4"
           href="/contact"
-          id="react-aria-4"
+          id=":r3:"
           tabindex="0"
         >
           <div
@@ -371,7 +371,7 @@ exports[`NavList renders a simple list 1`] = `
           >
             <span
               class="c6"
-              id="react-aria-4--label"
+              id=":r3:--label"
             >
               Contact
             </span>
@@ -738,12 +738,12 @@ exports[`NavList renders with groups 1`] = `
       >
         <h3
           class="c3"
-          id="react-aria-2"
+          id=":r5:"
         >
           Overview
         </h3>
         <ul
-          aria-labelledby="react-aria-2"
+          aria-labelledby=":r5:"
           class="c4"
         >
           <li
@@ -751,10 +751,10 @@ exports[`NavList renders with groups 1`] = `
           >
             <a
               aria-current="page"
-              aria-labelledby="react-aria-3--label "
+              aria-labelledby=":r6:--label "
               class="c7 c8"
               href="/getting-started"
-              id="react-aria-3"
+              id=":r6:"
               tabindex="0"
             >
               <div
@@ -763,7 +763,7 @@ exports[`NavList renders with groups 1`] = `
               >
                 <span
                   class="c10"
-                  id="react-aria-3--label"
+                  id=":r6:--label"
                 >
                   Getting started
                 </span>
@@ -782,22 +782,22 @@ exports[`NavList renders with groups 1`] = `
       >
         <h3
           class="c3"
-          id="react-aria-4"
+          id=":r7:"
         >
           Components
         </h3>
         <ul
-          aria-labelledby="react-aria-4"
+          aria-labelledby=":r7:"
           class="c4"
         >
           <li
             class="c5 c11"
           >
             <a
-              aria-labelledby="react-aria-5--label "
+              aria-labelledby=":r8:--label "
               class="c7 c8"
               href="/Avatar"
-              id="react-aria-5"
+              id=":r8:"
               tabindex="0"
             >
               <div
@@ -806,7 +806,7 @@ exports[`NavList renders with groups 1`] = `
               >
                 <span
                   class="c10"
-                  id="react-aria-5--label"
+                  id=":r8:--label"
                 >
                   Avatar
                 </span>
@@ -1190,15 +1190,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
       class="c0"
     >
       <li
-        aria-labelledby="react-aria-2"
+        aria-labelledby=":r1v:"
         class="c1 c2"
       >
         <button
-          aria-controls="react-aria-3"
+          aria-controls=":r20:"
           aria-expanded="true"
-          aria-labelledby="react-aria-2--label "
+          aria-labelledby=":r1v:--label "
           class="c3 c4"
-          id="react-aria-2"
+          id=":r1v:"
           tabindex="0"
         >
           <div
@@ -1210,7 +1210,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
             >
               <span
                 class="c1 c7"
-                id="react-aria-2--label"
+                id=":r1v:--label"
               >
                 Item
               </span>
@@ -1238,19 +1238,19 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
         </button>
         <div>
           <ul
-            aria-labelledby="react-aria-2"
+            aria-labelledby=":r1v:"
             class="c1 c10"
-            id="react-aria-3"
+            id=":r20:"
           >
             <li
               class="c3 c11"
             >
               <a
                 aria-current="page"
-                aria-labelledby="react-aria-4--label "
+                aria-labelledby=":r22:--label "
                 class="c12 c13"
                 href="#"
-                id="react-aria-4"
+                id=":r22:"
                 tabindex="0"
               >
                 <div
@@ -1259,7 +1259,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
                 >
                   <span
                     class="c1 c7"
-                    id="react-aria-4--label"
+                    id=":r22:--label"
                   >
                     Sub Item
                   </span>
@@ -1673,15 +1673,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
       class="c0"
     >
       <li
-        aria-labelledby="react-aria-2"
+        aria-labelledby=":r1q:"
         class="c1 c2"
       >
         <button
-          aria-controls="react-aria-3"
+          aria-controls=":r1r:"
           aria-expanded="false"
-          aria-labelledby="react-aria-2--label "
+          aria-labelledby=":r1q:--label "
           class="c3 c4"
-          id="react-aria-2"
+          id=":r1q:"
           tabindex="0"
         >
           <div
@@ -1693,7 +1693,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
             >
               <span
                 class="c1 c7"
-                id="react-aria-2--label"
+                id=":r1q:--label"
               >
                 Item
               </span>
@@ -1721,19 +1721,19 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
         </button>
         <div>
           <ul
-            aria-labelledby="react-aria-2"
+            aria-labelledby=":r1q:"
             class="c1 c10"
-            id="react-aria-3"
+            id=":r1r:"
           >
             <li
               class="c3 c11"
             >
               <a
                 aria-current="page"
-                aria-labelledby="react-aria-4--label "
+                aria-labelledby=":r1t:--label "
                 class="c12 c13"
                 href="#"
-                id="react-aria-4"
+                id=":r1t:"
                 tabindex="0"
               >
                 <div
@@ -1742,7 +1742,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
                 >
                   <span
                     class="c1 c7"
-                    id="react-aria-4--label"
+                    id=":r1t:--label"
                   >
                     Sub Item
                   </span>
diff --git a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
index 7d696d62efc..a1682f981cd 100644
--- a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
+++ b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
@@ -248,7 +248,7 @@ exports[`SelectPanel renders consistently 1`] = `
     aria-haspopup="true"
     className="c1"
     data-block={null}
-    id="react-aria-3"
+    id=":r2:"
     onClick={[Function]}
     onKeyDown={[Function]}
     style={{}}
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index 0893c7502ea..5f5cd763cca 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -248,7 +248,7 @@ exports[`ActionMenu renders consistently 1`] = `
     aria-haspopup="true"
     className="c1"
     data-block={null}
-    id="react-aria-1"
+    id=":r0:"
     onClick={[Function]}
     onKeyDown={[Function]}
     style={{}}
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
index 8196646c9ce..39e09045a50 100644
--- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
   <button
     aria-haspopup="true"
     className="c1 c2"
-    id="react-aria-1"
+    id=":r0:"
     onClick={[Function]}
     onKeyDown={[Function]}
     tabIndex={0}
@@ -208,7 +208,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
       aria-expanded="true"
       aria-haspopup="true"
       class="c1 c2"
-      id="react-aria-1"
+      id=":r6:"
       tabindex="0"
     >
       Anchor Button
diff --git a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
index efcb59b7703..a24e2fcdabb 100644
--- a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
@@ -211,7 +211,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
             aria-invalid="false"
             aria-required="false"
             className="c6"
-            id="react-aria-2"
+            id=":r1:"
             name="one"
             onChange={[Function]}
             type="checkbox"
@@ -224,7 +224,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
         >
           <label
             className="c8"
-            htmlFor="react-aria-2"
+            htmlFor=":r1:"
           >
             Choice one
           </label>
@@ -242,7 +242,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
             aria-invalid="false"
             aria-required="false"
             className="c6"
-            id="react-aria-3"
+            id=":r2:"
             name="two"
             onChange={[Function]}
             type="checkbox"
@@ -255,7 +255,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
         >
           <label
             className="c8"
-            htmlFor="react-aria-3"
+            htmlFor=":r2:"
           >
             Choice two
           </label>
@@ -273,7 +273,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
             aria-invalid="false"
             aria-required="false"
             className="c6"
-            id="react-aria-4"
+            id=":r3:"
             name="three"
             onChange={[Function]}
             type="checkbox"
@@ -286,7 +286,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
         >
           <label
             className="c8"
-            htmlFor="react-aria-4"
+            htmlFor=":r3:"
           >
             Choice three
           </label>
diff --git a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
index e48aa53ef97..625b1dfd993 100644
--- a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
@@ -155,7 +155,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
             aria-invalid="false"
             aria-required="false"
             className="c6"
-            id="react-aria-2"
+            id=":r1:"
             name="radioInput"
             onChange={[Function]}
             type="radio"
@@ -168,7 +168,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
         >
           <label
             className="c8"
-            htmlFor="react-aria-2"
+            htmlFor=":r1:"
           >
             Choice one
           </label>
@@ -186,7 +186,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
             aria-invalid="false"
             aria-required="false"
             className="c6"
-            id="react-aria-3"
+            id=":r2:"
             name="radioInput"
             onChange={[Function]}
             type="radio"
@@ -199,7 +199,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
         >
           <label
             className="c8"
-            htmlFor="react-aria-3"
+            htmlFor=":r2:"
           >
             Choice two
           </label>
@@ -217,7 +217,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
             aria-invalid="false"
             aria-required="false"
             className="c6"
-            id="react-aria-4"
+            id=":r3:"
             name="radioInput"
             onChange={[Function]}
             type="radio"
@@ -230,7 +230,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
         >
           <label
             className="c8"
-            htmlFor="react-aria-4"
+            htmlFor=":r3:"
           >
             Choice three
           </label>
diff --git a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
index 910aef774dd..eb0359a1367 100644
--- a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
@@ -155,7 +155,7 @@ exports[`RadioGroup renders consistently 1`] = `
             aria-invalid="false"
             aria-required="false"
             className="c6"
-            id="react-aria-2"
+            id=":r1:"
             name="choices"
             onChange={[Function]}
             type="radio"
@@ -168,7 +168,7 @@ exports[`RadioGroup renders consistently 1`] = `
         >
           <label
             className="c8"
-            htmlFor="react-aria-2"
+            htmlFor=":r1:"
           >
             Choice one
           </label>
@@ -186,7 +186,7 @@ exports[`RadioGroup renders consistently 1`] = `
             aria-invalid="false"
             aria-required="false"
             className="c6"
-            id="react-aria-3"
+            id=":r2:"
             name="choices"
             onChange={[Function]}
             type="radio"
@@ -199,7 +199,7 @@ exports[`RadioGroup renders consistently 1`] = `
         >
           <label
             className="c8"
-            htmlFor="react-aria-3"
+            htmlFor=":r2:"
           >
             Choice two
           </label>
@@ -217,7 +217,7 @@ exports[`RadioGroup renders consistently 1`] = `
             aria-invalid="false"
             aria-required="false"
             className="c6"
-            id="react-aria-4"
+            id=":r3:"
             name="choices"
             onChange={[Function]}
             type="radio"
@@ -230,7 +230,7 @@ exports[`RadioGroup renders consistently 1`] = `
         >
           <label
             className="c8"
-            htmlFor="react-aria-4"
+            htmlFor=":r3:"
           >
             Choice three
           </label>
diff --git a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
index 9de0af301c1..4cb12fa158d 100644
--- a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
@@ -72,7 +72,7 @@ exports[`ActionMenu renders consistently 1`] = `
   aria-haspopup="true"
   aria-label="menu"
   className="c0 c1"
-  id="react-aria-1"
+  id=":r0:"
   onClick={[Function]}
   onKeyDown={[Function]}
   tabIndex={0}
diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts
index b951b256b02..007da7941eb 100644
--- a/src/hooks/useId.ts
+++ b/src/hooks/useId.ts
@@ -1,34 +1,16 @@
-// eslint-disable-next-line no-restricted-imports, import/no-namespace
-import * as React from 'react'
-// eslint-disable-next-line no-restricted-imports
-import {useSSRSafeId} from '@react-aria/ssr'
+import {useId as useReactId} from 'react'
 
 /**
- * Detect if `React.useId()` is present. This strategy is a workaround for:
- * https://github.com/webpack/webpack/issues/14814
+ * Generate a unique id to be used in a component. If an `id` is provided, it
+ * will be used instead.
  *
- * This technique is inspired by Material UI:
- * https://github.com/mui/material-ui/blob/7bc478ec00a3b5625427f36c827e00b0a17be3d0/packages/mui-utils/src/useId.ts#L21
+ * @param id - An optional value to be used instead of generating a unique id.
+ * Useful when accepting an optional `id` as a prop in a component.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, no-useless-concat
-const useReactId: undefined | (() => string) = (React as any)['useId' + '']
-
-export function useId(id?: string) {
-  // Force useSSRSafeId in test environments to maintain snapshot parity between
-  // major versions of React
-  if (process.env.NODE_ENV === 'test') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useSSRSafeId(id)
-  }
-
-  if (useReactId !== undefined) {
-    if (id) {
-      return id
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useReactId()
+export function useId(id?: string): string {
+  const uniqueId = useReactId()
+  if (id) {
+    return id
   }
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return useSSRSafeId(id)
+  return uniqueId
 }
diff --git a/src/utils/ssr.tsx b/src/utils/ssr.tsx
index a74b004a343..794001e49ec 100644
--- a/src/utils/ssr.tsx
+++ b/src/utils/ssr.tsx
@@ -1,2 +1,8 @@
-// eslint-disable-next-line no-restricted-imports
-export {SSRProvider, useSSRSafeId} from '@react-aria/ssr'
+import type {PropsWithChildren} from 'react'
+import {useId} from '../hooks/useId'
+
+export function SSRProvider({children}: PropsWithChildren) {
+  return children
+}
+
+export const useSSRSafeId = useId