diff --git a/client/eslint.config.js b/client/eslint.config.js
index bac4055d..21cb7b61 100644
--- a/client/eslint.config.js
+++ b/client/eslint.config.js
@@ -21,7 +21,7 @@ export default tseslint.config(
         },
         rules: {
             ...reactHooks.configs.recommended.rules,
-            'react-compiler/react-compiler': 'error',
+            'react-compiler/react-compiler': 'warn',
             'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
         },
     },
diff --git a/client/src/components/Timeline/Timeline.tsx b/client/src/components/Timeline/Timeline.tsx
index ca2197ea..022b78d4 100644
--- a/client/src/components/Timeline/Timeline.tsx
+++ b/client/src/components/Timeline/Timeline.tsx
@@ -9,7 +9,7 @@ import { SmallTimelineChart } from './SmallTimelineChart';
 import { Loader } from './Loader';
 
 export const Timeline = memo(() => {
-    const popoverTriggerRef = useRef();
+    const popoverTriggerRef = useRef<HTMLDivElement>(null);
 
     const isLoading = useStoreState((state) => state.isLoading);
 
@@ -23,7 +23,9 @@ export const Timeline = memo(() => {
                     <MainTimelineChart />
                 </BlackBox>
                 <Popover isOpen={!!selectedTimelineItem}>
-                    <PopoverTrigger>{popoverTriggerRef.current || <div />}</PopoverTrigger>
+                    <PopoverTrigger>
+                        <div ref={popoverTriggerRef} />
+                    </PopoverTrigger>
                     <PopoverContent p={4} w="fit-content" boxShadow="lg" bg="gray.50">
                         <PopoverArrow bg="gray.50" />
                         <PopoverBody p={0}>
diff --git a/client/src/components/Timeline/TimelineItemEditDeleteButton.tsx b/client/src/components/Timeline/TimelineItemEditDeleteButton.tsx
index 3c28bea1..123714bb 100644
--- a/client/src/components/Timeline/TimelineItemEditDeleteButton.tsx
+++ b/client/src/components/Timeline/TimelineItemEditDeleteButton.tsx
@@ -17,7 +17,7 @@ export function TimelineItemEditDeleteButton({ deleteItem }) {
         deleteItem();
         onClose();
     };
-    const cancelRef = useRef(null);
+    const cancelRef = useRef<HTMLButtonElement>(null!);
 
     return (
         <>
diff --git a/client/src/components/TrackItemTable/ToggleColumnFilter.tsx b/client/src/components/TrackItemTable/ToggleColumnFilter.tsx
index a223f5e1..8daaf863 100644
--- a/client/src/components/TrackItemTable/ToggleColumnFilter.tsx
+++ b/client/src/components/TrackItemTable/ToggleColumnFilter.tsx
@@ -4,13 +4,14 @@ import { SearchIcon } from '@chakra-ui/icons';
 
 export function ToggleColumnFilter({ children }) {
     const { onOpen, onClose, isOpen } = useDisclosure();
-    const firstFieldRef = useRef(null);
+    const firstFieldRef = useRef<HTMLInputElement>(null!);
+
     const form = cloneElement(children, { ref: firstFieldRef, onCancel: onClose });
 
     return (
         <Popover
             isOpen={isOpen}
-            initialFocusRef={firstFieldRef}
+            initialFocusRef={firstFieldRef as React.RefObject<{ focus(): void }>}
             onOpen={onOpen}
             onClose={onClose}
             placement="right"