fix(search): replace createRef with useRef for microphone icon

src/features/search/Search.jsx

@@ -1,9 +1,11 @@
 /* global chrome */
 import variables from 'config/variables';
-import { memo, createRef, useEffect, useState, useCallback } from 'react';
+import { memo, useRef, useEffect, useState, useCallback } from 'react';
 import { MdSearch, MdMic } from 'react-icons/md';
 import { Tooltip } from 'components/Elements';
 
+import EventBus from 'utils/eventbus';
+
 import './search.scss';
 
 function Search() {
@@ -12,7 +14,7 @@ function Search() {
     localStorage.getItem('widgetStyle') === 'legacy' ? 'searchIcons old' : 'searchIcons',
   );
 
-  const micIcon = createRef();
+  const micIcon = useRef(null);
 
   const startSpeechRecognition = useCallback(() => {
     const voiceSearch = new window.webkitSpeechRecognition();
@@ -64,8 +66,10 @@ function Search() {
           <MdMic className="micIcon" />
         </button>,
       );
+    } else {
+      setMicrophone(null);
     }
-  }, [micIcon, startSpeechRecognition]);
+  }, [startSpeechRecognition]);
 
   useEffect(() => {
     init();
@@ -75,6 +79,12 @@ function Search() {
         element.focus();
       }
     }
+
+    EventBus.on('refresh', (data) => {
+      if (data === 'search') {
+        init();
+      }
+    });
   }, [init]);
 
   function searchButton(e) {

src/features/search/options/SearchOptions.jsx

@@ -6,10 +6,9 @@ import { Checkbox } from 'components/Form/Settings';
 
 import EventBus from 'utils/eventbus';
 
-const SearchOptions = () => {
+const SEARCH_SECTION = 'modals.main.settings.sections.search';
-  const SEARCH_SECTION = 'modals.main.settings.sections.search';
 
-  const ChromePolicyWarning = () => {
+const ChromePolicyWarning = () => {
   return (
     <div className="itemWarning" style={{ marginBottom: '20px' }}>
       <MdOutlineWarning />
@@ -19,9 +18,9 @@ const SearchOptions = () => {
       </div>
     </div>
   );
-  };
+};
 
-  const AdditionalOptions = () => {
+const AdditionalOptions = () => {
   return (
     <Row final={true}>
       <Content
@@ -46,7 +45,9 @@ const SearchOptions = () => {
       </Action>
     </Row>
   );
-  };
+};
+
+const SearchOptions = () => {
 
   return (
     <>