diff --git a/src/components/alphaPicker/AlphaPickerComponent.tsx b/src/components/alphaPicker/AlphaPickerComponent.tsx
index 0ea33cd21..b0d2bd10c 100644
--- a/src/components/alphaPicker/AlphaPickerComponent.tsx
+++ b/src/components/alphaPicker/AlphaPickerComponent.tsx
@@ -10,7 +10,7 @@ type AlphaPickerProps = {
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const AlphaPickerComponent: FunctionComponent<AlphaPickerProps> = ({ onAlphaPicked = () => {} }: AlphaPickerProps) => {
     const [ alphaPicker, setAlphaPicker ] = useState(null);
-    const element = useRef(null);
+    const element = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         setAlphaPicker(new AlphaPicker({
diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx
index 06ef06f0c..b84095a51 100644
--- a/src/components/pages/NewUserPage.tsx
+++ b/src/components/pages/NewUserPage.tsx
@@ -24,7 +24,7 @@ type ItemsArr = {
 const NewUserPage: FunctionComponent = () => {
     const [ channelsItems, setChannelsItems ] = useState([]);
     const [ mediaFoldersItems, setMediaFoldersItems ] = useState([]);
-    const element = useRef(null);
+    const element = useRef<HTMLDivElement>(null);
 
     const getItemsResult = (items: ItemsArr[]) => {
         return items.map(item =>
diff --git a/src/components/pages/UserEditPage.tsx b/src/components/pages/UserEditPage.tsx
index 5cddcb85d..139ed9221 100644
--- a/src/components/pages/UserEditPage.tsx
+++ b/src/components/pages/UserEditPage.tsx
@@ -31,7 +31,7 @@ const UserEditPage: FunctionComponent = () => {
     const [ authenticationProviderId, setAuthenticationProviderId ] = useState('');
     const [ passwordResetProviderId, setPasswordResetProviderId ] = useState('');
 
-    const element = useRef(null);
+    const element = useRef<HTMLDivElement>(null);
 
     const triggerChange = (select: HTMLInputElement) => {
         const evt = document.createEvent('HTMLEvents');
diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx
index aa9db0127..13e79a8a4 100644
--- a/src/components/pages/UserLibraryAccessPage.tsx
+++ b/src/components/pages/UserLibraryAccessPage.tsx
@@ -25,7 +25,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
     const [mediaFoldersItems, setMediaFoldersItems] = useState([]);
     const [devicesItems, setDevicesItems] = useState([]);
 
-    const element = useRef(null);
+    const element = useRef<HTMLDivElement>(null);
 
     const triggerChange = (select: HTMLInputElement) => {
         const evt = document.createEvent('HTMLEvents');
diff --git a/src/components/pages/UserParentalControl.tsx b/src/components/pages/UserParentalControl.tsx
index 9ac836f44..6fec792a1 100644
--- a/src/components/pages/UserParentalControl.tsx
+++ b/src/components/pages/UserParentalControl.tsx
@@ -32,7 +32,7 @@ const UserParentalControl: FunctionComponent = () => {
     const [ accessSchedules, setAccessSchedules ] = useState([]);
     const [ blockedTags, setBlockedTags ] = useState([]);
 
-    const element = useRef(null);
+    const element = useRef<HTMLDivElement>(null);
 
     const populateRatings = useCallback((allParentalRatings) => {
         let rating;
diff --git a/src/components/pages/UserProfilesPage.tsx b/src/components/pages/UserProfilesPage.tsx
index a3b49ab09..ede1ba9f3 100644
--- a/src/components/pages/UserProfilesPage.tsx
+++ b/src/components/pages/UserProfilesPage.tsx
@@ -23,7 +23,7 @@ type MenuEntry = {
 const UserProfilesPage: FunctionComponent = () => {
     const [ users, setUsers ] = useState([]);
 
-    const element = useRef(null);
+    const element = useRef<HTMLDivElement>(null);
 
     const loadData = () => {
         loading.show();
diff --git a/src/components/search/SearchFields.tsx b/src/components/search/SearchFields.tsx
index 67ba0f226..c6e6f7679 100644
--- a/src/components/search/SearchFields.tsx
+++ b/src/components/search/SearchFields.tsx
@@ -36,7 +36,7 @@ type SearchFieldsProps = {
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const SearchFields: FunctionComponent<SearchFieldsProps> = ({ onSearch = () => {} }: SearchFieldsProps) => {
-    const element = useRef(null);
+    const element = useRef<HTMLDivElement>(null);
 
     const getSearchInput = () => element?.current?.querySelector('.searchfields-txtSearch');
 
diff --git a/src/components/search/SearchResultsRow.tsx b/src/components/search/SearchResultsRow.tsx
index 10bdd1d9a..112b98e58 100644
--- a/src/components/search/SearchResultsRow.tsx
+++ b/src/components/search/SearchResultsRow.tsx
@@ -23,7 +23,7 @@ type SearchResultsRowProps = {
 }
 
 const SearchResultsRow: FunctionComponent<SearchResultsRowProps> = ({ title, items = [], cardOptions = {} }: SearchResultsRowProps) => {
-    const element = useRef(null);
+    const element = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         cardBuilder.buildCards(items, {