useRef로 드롭다운 메뉴 컨트롤하기

import styled from 'styled-components';
import Nav from './Nav';
import { useEffect, useRef, useState } from 'react';
import Bookmark from './Bookmark';
import User from '../atoms/User';

function Header() {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef();
  const onClick = () => {
    setIsOpen(!isOpen);
  };
  const clickOut = e => {
    if (isOpen && ref.current && !ref.current.contains(e.target)) {
      setIsOpen(false);
    }
  };
  useEffect(() => {
    document.addEventListener('mousedown', clickOut);
    return () => {
      document.removeEventListener('mousedown', clickOut);
    };
  }, [isOpen]);

  return (
    <HeaderWrapper>
      <div>
        <HeaderTitle>
          오늘은
          <br />
          어떤가요?
        </HeaderTitle>
        <BookmarkWrapper>
          <Bookmark />
        </BookmarkWrapper>
      </div>
      <GnbLayout ref={ref}>
        <User onClick={onClick}>USERNAME</User>
        {isOpen && <Nav />}
      </GnbLayout>
    </HeaderWrapper>
  );
}

export default Header;

자꾸 에러가 났는데! useRef가 널이고 막ㅠ forewardRef쓰라그러고...
막상 써도 똑같이 에러나고 동작도 안함...

왜그런가 했더니 ref를 준곳이 잘못됐던 것 같다!!
처음엔 nav에 줬다가, user에 줬다가 난리를 쳤다...
그러다 혹시나 싶어서 이벤트를 발생시키는 두 컴포넌트를 포함한 부모노드에 ref를 줬더니 작동함!!!
이거때문에 엄청 헤맸는데...ㅎ 됐으니 됐다....