refactor: use React useId() hook for filter component IDs

Author: afonsojramos

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>}
     />

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>}
     />

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>}
     />

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={