diff --git a/src/hooks/useSearchHighlightAndScroll.ts b/src/hooks/useSearchHighlightAndScroll.ts
index aaae40f0808b..300839312989 100644
--- a/src/hooks/useSearchHighlightAndScroll.ts
+++ b/src/hooks/useSearchHighlightAndScroll.ts
@@ -237,18 +237,23 @@ function useSearchHighlightAndScroll({
             return;
         }
 
-        // As we depend on newSearchResultKeys to determine which transactionIDs to reset from transactionIDsToHighlight,
-        // we need to ensure that newSearchResultKeys is not cleared before we reset transactionIDsToHighlight
         const highlightedTransactionIDs = Object.keys(transactionIDsToHighlight).filter(
             (id) => transactionIDsToHighlight[id] && newSearchResultKeys?.has(`${ONYXKEYS.COLLECTION.TRANSACTION}${id}`),
         );
 
-        const timer = setTimeout(() => {
-            mergeTransactionIdsHighlightOnSearchRoute(queryJSON.type, Object.fromEntries(highlightedTransactionIDs.map((id) => [id, false])));
-        }, CONST.ANIMATED_HIGHLIGHT_START_DURATION);
-
+        // We need to use requestAnimationFrame here to ensure that setTimeout actually starts
+        // only after the user has navigated to the "Reports > Expenses" page.
+        // Otherwise, there is still a chance we might miss the timing because setTimeout runs too early,
+        // causing the highlight not to appear.
+        let timer: NodeJS.Timeout;
+        const animation = requestAnimationFrame(() => {
+            timer = setTimeout(() => {
+                mergeTransactionIdsHighlightOnSearchRoute(queryJSON.type, Object.fromEntries(highlightedTransactionIDs.map((id) => [id, false])));
+            }, CONST.ANIMATED_HIGHLIGHT_START_DURATION);
+        });
         return () => {
             clearTimeout(timer);
+            cancelAnimationFrame(animation);
         };
     }, [transactionIDsToHighlight, queryJSON.type, newSearchResultKeys]);
 
@@ -266,23 +271,11 @@ function useSearchHighlightAndScroll({
             return;
         }
 
-        // We need to use requestAnimationFrame here to ensure that setTimeout actually starts
-        // only after "Reports > Expenses" pages finishes the current rendering cycle and the user sees the highlight,
-        // which is when we want to start the timer to remove the highlight.
-        // Otherwise, there is still a chance we might miss the timing because setTimeout runs too early,
-        // causing the highlight not to appear.
-
-        let timer: NodeJS.Timeout;
-        const animation = requestAnimationFrame(() => {
-            timer = setTimeout(() => {
-                setNewSearchResultKeys(null);
-            }, CONST.ANIMATED_HIGHLIGHT_START_DURATION);
-        });
+        const timer = setTimeout(() => {
+            setNewSearchResultKeys(null);
+        }, CONST.ANIMATED_HIGHLIGHT_START_DURATION);
 
-        return () => {
-            clearTimeout(timer);
-            cancelAnimationFrame(animation);
-        };
+        return () => clearTimeout(timer);
     }, [newSearchResultKeys]);
 
     /**