Passing ref from a child component

apps/app/src/features/search/client/components/SearchForm.tsx

@@ -1,15 +1,19 @@
-import React, { useCallback, forwardRef } from 'react';
+import React, {
+  useCallback, useRef, useEffect,
+} from 'react';
 
 type Props = {
   searchText: string,
   onChangeSearchText?: (text: string) => void,
   onClickClearButton?: () => void,
 }
-export const SearchForm = forwardRef<HTMLInputElement, Props>((props, ref): JSX.Element => {
+export const SearchForm = (props: Props): JSX.Element => {
   const {
     searchText, onChangeSearchText, onClickClearButton,
   } = props;
 
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const changeSearchTextHandler = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     if (onChangeSearchText != null) {
       onChangeSearchText(e.target.value);
@@ -22,12 +26,19 @@ export const SearchForm = forwardRef<HTMLInputElement, Props>((props, ref): JSX.
     }
   }, [onClickClearButton]);
 
+  useEffect(() => {
+    if (inputRef.current != null) {
+      inputRef.current.focus();
+    }
+  });
+
   return (
     <div className="text-muted d-flex justify-content-center align-items-center ps-1">
       <span className="material-symbols-outlined fs-4 me-3">search</span>
 
       <input
-        ref={ref}
+        ref={inputRef}
+        type="text"
         className="form-control"
         placeholder="Search..."
         value={searchText}
@@ -43,4 +54,4 @@ export const SearchForm = forwardRef<HTMLInputElement, Props>((props, ref): JSX.
       </button>
     </div>
   );
-});
+};

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useState, useCallback, useRef,
+  useState, useCallback,
 } from 'react';
 
 import { Modal, ModalBody } from 'reactstrap';
@@ -12,8 +12,6 @@ import { SearchHelp } from './SearchHelp';
 const SearchModal = (): JSX.Element => {
   const { data: searchModalData, close: closeSearchModal } = useSearchModal();
 
-  const inputRef = useRef<HTMLInputElement>(null);
-
   const [searchText, setSearchText] = useState('');
 
   const changeSearchTextHandler = useCallback((searchText: string) => {
@@ -28,7 +26,6 @@ const SearchModal = (): JSX.Element => {
     <Modal size="lg" isOpen={searchModalData?.isOpened ?? false} toggle={closeSearchModal}>
       <ModalBody>
         <SearchForm
-          ref={inputRef}
           searchText={searchText}
           onChangeSearchText={changeSearchTextHandler}
           onClickClearButton={clickClearButtonHandler}