Uncaught TypeError: невозможно прочитать свойство 'contains', равное null, в HTMLDocument.handler

В моем компоненте заголовка есть следующий код. Я подумал, что это может вызвать эту ошибку, потому что я пытаюсь получить к нему доступ еще до того, как он отобразится на экране. Я не уверен, почему это не работает. Я попытался использовать forwardRef в дочернем компоненте и получил следующую ошибку в справке из компонента SearchDropDown. Надеюсь, кто-нибудь может сказать мне, что здесь не так.

Type '((instance: unknown) => void) | MutableRefObject<unknown>' is not assignable to type 'LegacyRef<HTMLDivElement>'.
  Type 'MutableRefObject<unknown>' is not assignable to type 'LegacyRef<HTMLDivElement>'.
    Type 'MutableRefObject<unknown>' is not assignable to type 'RefObject<HTMLDivElement>'.
      Types of property 'current' are incompatible.
        Type '{}' is missing the following properties from type 'HTMLDivElement': align, addEventListener, removeEventListener, accessKey, and 235 more.
The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Компонент страницы

  const domNodeRef = useRef(null);
  const [search, setSearch] = useState("");

  useEffect(() => {
    const handler = (e) => {
      if (domNodeRef !== undefined || domNodeRef !== null) {
        if (!domNodeRef.current.contains(e.target)) {
          setSearch("");
        }
      }
    };
    document.addEventListener("mousedown", handler);

    return () => {
      document.addEventListener("mousedown", handler);
    };
  });

  return (
   <div className = "header">
     <div className = "header-content">
       <div className = "searchh">
         <input 
           placeholder = "Type to search"
           onChange = {handleSearchChange}
         />
         {!!search && (
           <SearchDropDown 
             search = {search}
             ref = {domNodeRef}
           />
         )}
       </div>
     </div>
   </div>
  )

Компонент SearchDropDown

const SearchDropDown = (props) => {
  ....
  return (
    <div className = "search-drop-down" ref = {props.ref}>
     .....
    </div>
  )
}