diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
index f84e29bf7302f..654fe76918371 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
@@ -8,22 +8,34 @@
  */
 
 import * as React from 'react';
-import {useContext} from 'react';
-import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {useState, useContext, useCallback} from 'react';
 
-import SearchInput from '../SearchInput';
+import SearchInput from 'react-devtools-shared/src/devtools/views/SearchInput';
+import {
+  TreeDispatcherContext,
+  TreeStateContext,
+} from 'react-devtools-shared/src/devtools/views/Components/TreeContext';
 
-type Props = {};
+export default function ComponentSearchInput(): React.Node {
+  const [localSearchQuery, setLocalSearchQuery] = useState('');
+  const {searchIndex, searchResults} = useContext(TreeStateContext);
+  const transitionDispatch = useContext(TreeDispatcherContext);
 
-export default function ComponentSearchInput(props: Props): React.Node {
-  const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
-  const dispatch = useContext(TreeDispatcherContext);
-
-  const search = (text: string) =>
-    dispatch({type: 'SET_SEARCH_TEXT', payload: text});
-  const goToNextResult = () => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'});
-  const goToPreviousResult = () =>
-    dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'});
+  const search = useCallback(
+    (text: string) => {
+      setLocalSearchQuery(text);
+      transitionDispatch({type: 'SET_SEARCH_TEXT', payload: text});
+    },
+    [setLocalSearchQuery, transitionDispatch],
+  );
+  const goToNextResult = useCallback(
+    () => transitionDispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}),
+    [transitionDispatch],
+  );
+  const goToPreviousResult = useCallback(
+    () => transitionDispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}),
+    [transitionDispatch],
+  );
 
   return (
     <SearchInput
@@ -33,7 +45,7 @@ export default function ComponentSearchInput(props: Props): React.Node {
       search={search}
       searchIndex={searchIndex}
       searchResultsCount={searchResults.length}
-      searchText={searchText}
+      searchText={localSearchQuery}
       testName="ComponentSearchInput"
     />
   );