diff --git a/contributor-docs/adrs/adr-010-behavior-isolation.md b/contributor-docs/adrs/adr-010-behavior-isolation.md
index 1d76419fc74..4e853f432a2 100644
--- a/contributor-docs/adrs/adr-010-behavior-isolation.md
+++ b/contributor-docs/adrs/adr-010-behavior-isolation.md
@@ -84,7 +84,7 @@ Primer React's [recent addition of the Relative Time component](https://github.c
 
 ```typescript
 const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
-const HTMLElement = root.HTMLElement || (null as unknown as typeof window['HTMLElement'])
+const HTMLElement = root.HTMLElement || (null as unknown as (typeof window)['HTMLElement'])
 ```
 
 These lines could also be added to the global context, to avoid adding it to each element.
diff --git a/package-lock.json b/package-lock.json
index 0866e27bf25..da1881d3d15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -145,7 +145,7 @@
         "micromark-extension-frontmatter": "1.0.0",
         "micromark-extension-mdxjs": "1.0.1",
         "postcss-custom-properties-fallback": "^1.0.2",
-        "prettier": "2.8.1",
+        "prettier": "2.8.8",
         "react": "18.2.0",
         "react-dnd": "14.0.4",
         "react-dnd-html5-backend": "14.0.2",
@@ -34390,9 +34390,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
-      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
diff --git a/package.json b/package.json
index 9c3a6081f30..50349b32499 100644
--- a/package.json
+++ b/package.json
@@ -229,7 +229,7 @@
     "micromark-extension-frontmatter": "1.0.0",
     "micromark-extension-mdxjs": "1.0.1",
     "postcss-custom-properties-fallback": "^1.0.2",
-    "prettier": "2.8.1",
+    "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dnd": "14.0.4",
     "react-dnd-html5-backend": "14.0.2",
diff --git a/src/ActionList/ActionList.features.stories.tsx b/src/ActionList/ActionList.features.stories.tsx
index 3637f6760a0..2888ad1108f 100644
--- a/src/ActionList/ActionList.features.stories.tsx
+++ b/src/ActionList/ActionList.features.stories.tsx
@@ -418,7 +418,7 @@ export const InsideOverlay = () => {
 export const GroupWithSubtleTitle = () => {
   const [assignees, setAssignees] = React.useState(users.slice(0, 1))
 
-  const toggleAssignee = (assignee: typeof users[number]) => {
+  const toggleAssignee = (assignee: (typeof users)[number]) => {
     const assigneeIndex = assignees.findIndex(a => a.login === assignee.login)
 
     if (assigneeIndex === -1) setAssignees([...assignees, assignee])
@@ -450,7 +450,7 @@ export const GroupWithSubtleTitle = () => {
 export const GroupWithFilledTitle = () => {
   const [assignees, setAssignees] = React.useState(users.slice(0, 1))
 
-  const toggleAssignee = (assignee: typeof users[number]) => {
+  const toggleAssignee = (assignee: (typeof users)[number]) => {
     const assigneeIndex = assignees.findIndex(a => a.login === assignee.login)
 
     if (assigneeIndex === -1) setAssignees([...assignees, assignee])
diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx
index 5632bfe4ae0..88fec6fa0ec 100644
--- a/src/ActionMenu/ActionMenu.examples.stories.tsx
+++ b/src/ActionMenu/ActionMenu.examples.stories.tsx
@@ -24,7 +24,7 @@ export const GroupsAndDescriptions = () => {
     {name: 'FY23 - Q2', due: 'December 30, 2022', progress: 0},
   ]
 
-  const [selectedMilestone, setSelectedMilestone] = React.useState<typeof milestones[0] | undefined>()
+  const [selectedMilestone, setSelectedMilestone] = React.useState<(typeof milestones)[0] | undefined>()
 
   return (
     <ActionMenu open>
@@ -241,7 +241,7 @@ export const MixedSelection = () => {
 export const MultipleSections = () => {
   const items = [{name: 'Show code folding buttons'}, {name: 'Wrap lines'}, {name: 'Center content'}]
 
-  const [selectedMilestone, setSelectedMilestone] = React.useState<typeof items[0] | undefined>()
+  const [selectedMilestone, setSelectedMilestone] = React.useState<(typeof items)[0] | undefined>()
 
   return (
     <ActionMenu open>