Fix useRef TypeScript errors

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

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

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');

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');

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;

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();

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');
 

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