diff --git a/src/renderer/components/filters/ReasonFilter.tsx b/src/renderer/components/filters/ReasonFilter.tsx
index a9a5f2292..2fa42298a 100644
--- a/src/renderer/components/filters/ReasonFilter.tsx
+++ b/src/renderer/components/filters/ReasonFilter.tsx
@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import { type FC, useId } from 'react';
 
 import { NoteIcon } from '@primer/octicons-react';
 import { Text } from '@primer/react';
@@ -7,12 +7,14 @@ import { reasonFilter } from '../../utils/notifications/filters';
 import { FilterSection } from './FilterSection';
 
 export const ReasonFilter: FC = () => {
+  const id = useId();
+
   return (
     <FilterSection
       filter={reasonFilter}
       filterSetting="filterReasons"
       icon={NoteIcon}
-      id="filter-reasons"
+      id={id}
       title="Reason"
       tooltip={<Text>Filter notifications by reason.</Text>}
     />
diff --git a/src/renderer/components/filters/StateFilter.tsx b/src/renderer/components/filters/StateFilter.tsx
index 54869ef37..8b297e054 100644
--- a/src/renderer/components/filters/StateFilter.tsx
+++ b/src/renderer/components/filters/StateFilter.tsx
@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import { type FC, useId } from 'react';
 
 import { IssueOpenedIcon } from '@primer/octicons-react';
 import { Text } from '@primer/react';
@@ -7,12 +7,14 @@ import { stateFilter } from '../../utils/notifications/filters';
 import { FilterSection } from './FilterSection';
 
 export const StateFilter: FC = () => {
+  const id = useId();
+
   return (
     <FilterSection
       filter={stateFilter}
       filterSetting="filterStates"
       icon={IssueOpenedIcon}
-      id="filter-state"
+      id={id}
       title="State"
       tooltip={<Text>Filter notifications by state.</Text>}
     />
diff --git a/src/renderer/components/filters/SubjectTypeFilter.tsx b/src/renderer/components/filters/SubjectTypeFilter.tsx
index e2e04b774..229c62ed9 100644
--- a/src/renderer/components/filters/SubjectTypeFilter.tsx
+++ b/src/renderer/components/filters/SubjectTypeFilter.tsx
@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import { type FC, useId } from 'react';
 
 import { BellIcon } from '@primer/octicons-react';
 import { Text } from '@primer/react';
@@ -7,12 +7,14 @@ import { subjectTypeFilter } from '../../utils/notifications/filters';
 import { FilterSection } from './FilterSection';
 
 export const SubjectTypeFilter: FC = () => {
+  const id = useId();
+
   return (
     <FilterSection
       filter={subjectTypeFilter}
       filterSetting="filterSubjectTypes"
       icon={BellIcon}
-      id="filter-subject-type"
+      id={id}
       title="Type"
       tooltip={<Text>Filter notifications by type.</Text>}
     />
diff --git a/src/renderer/components/filters/UserTypeFilter.tsx b/src/renderer/components/filters/UserTypeFilter.tsx
index 5030ca55f..5bcaa52c3 100644
--- a/src/renderer/components/filters/UserTypeFilter.tsx
+++ b/src/renderer/components/filters/UserTypeFilter.tsx
@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import { type FC, useId } from 'react';
 
 import {
   DependabotIcon,
@@ -13,12 +13,14 @@ import { userTypeFilter } from '../../utils/notifications/filters';
 import { FilterSection } from './FilterSection';
 
 export const UserTypeFilter: FC = () => {
+  const id = useId();
+
   return (
     <FilterSection
       filter={userTypeFilter}
       filterSetting="filterUserTypes"
       icon={FeedPersonIcon}
-      id="filter-user-types"
+      id={id}
       layout="horizontal"
       title="User Type"
       tooltip={
diff --git a/src/renderer/components/filters/__snapshots__/ReasonFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/ReasonFilter.test.tsx.snap
index 61c02d8aa..b29a24bff 100644
--- a/src/renderer/components/filters/__snapshots__/ReasonFilter.test.tsx.snap
+++ b/src/renderer/components/filters/__snapshots__/ReasonFilter.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
           data-portal-root="true"
         >
           <fieldset
-            id="filter-reasons"
+            id="_r_1_"
           >
             <legend>
               <div
@@ -902,7 +902,7 @@ exports[`renderer/components/filters/ReasonFilter.tsx should render itself & its
         data-portal-root="true"
       >
         <fieldset
-          id="filter-reasons"
+          id="_r_1_"
         >
           <legend>
             <div
diff --git a/src/renderer/components/filters/__snapshots__/StateFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/StateFilter.test.tsx.snap
index 2aac188ef..0661eb1fb 100644
--- a/src/renderer/components/filters/__snapshots__/StateFilter.test.tsx.snap
+++ b/src/renderer/components/filters/__snapshots__/StateFilter.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`renderer/components/filters/StateFilter.tsx should render itself & its
           data-portal-root="true"
         >
           <fieldset
-            id="filter-state"
+            id="_r_1_"
           >
             <legend>
               <div
@@ -323,7 +323,7 @@ exports[`renderer/components/filters/StateFilter.tsx should render itself & its
         data-portal-root="true"
       >
         <fieldset
-          id="filter-state"
+          id="_r_1_"
         >
           <legend>
             <div
diff --git a/src/renderer/components/filters/__snapshots__/SubjectTypeFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/SubjectTypeFilter.test.tsx.snap
index fa77cb125..8131a0203 100644
--- a/src/renderer/components/filters/__snapshots__/SubjectTypeFilter.test.tsx.snap
+++ b/src/renderer/components/filters/__snapshots__/SubjectTypeFilter.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`renderer/components/filters/SubjectTypeFilter.tsx should render itself
           data-portal-root="true"
         >
           <fieldset
-            id="filter-subject-type"
+            id="_r_1_"
           >
             <legend>
               <div
@@ -377,7 +377,7 @@ exports[`renderer/components/filters/SubjectTypeFilter.tsx should render itself
         data-portal-root="true"
       >
         <fieldset
-          id="filter-subject-type"
+          id="_r_1_"
         >
           <legend>
             <div
diff --git a/src/renderer/components/filters/__snapshots__/UserTypeFilter.test.tsx.snap b/src/renderer/components/filters/__snapshots__/UserTypeFilter.test.tsx.snap
index 5e0bfea17..61c1e82a0 100644
--- a/src/renderer/components/filters/__snapshots__/UserTypeFilter.test.tsx.snap
+++ b/src/renderer/components/filters/__snapshots__/UserTypeFilter.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`renderer/components/filters/UserTypeFilter.tsx should render itself & i
           data-portal-root="true"
         >
           <fieldset
-            id="filter-user-types"
+            id="_r_1_"
           >
             <legend>
               <div
@@ -214,7 +214,7 @@ exports[`renderer/components/filters/UserTypeFilter.tsx should render itself & i
         data-portal-root="true"
       >
         <fieldset
-          id="filter-user-types"
+          id="_r_1_"
         >
           <legend>
             <div
diff --git a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
index 6d2b51c6c..2fdba6ba1 100644
--- a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
@@ -317,7 +317,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         </div>
       </fieldset>
       <fieldset
-        id="filter-user-types"
+        id="_r_3_"
       >
         <legend>
           <div
@@ -502,7 +502,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         </div>
       </fieldset>
       <fieldset
-        id="filter-subject-type"
+        id="_r_6_"
       >
         <legend>
           <div
@@ -850,7 +850,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         </div>
       </fieldset>
       <fieldset
-        id="filter-state"
+        id="_r_8_"
       >
         <legend>
           <div
@@ -1144,7 +1144,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         </div>
       </fieldset>
       <fieldset
-        id="filter-reasons"
+        id="_r_d_"
       >
         <legend>
           <div
@@ -2030,7 +2030,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
       data-wrap="nowrap"
     >
       <button
-        aria-describedby="_r_q_"
+        aria-describedby="_r_u_"
         class="prc-Button-ButtonBase-9n-Xk"
         data-loading="false"
         data-size="medium"
@@ -2076,7 +2076,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         aria-hidden="true"
         class="prc-TooltipV2-Tooltip-tLeuB"
         data-direction="n"
-        id="_r_q_"
+        id="_r_u_"
         popover="auto"
         role="tooltip"
       >