ref를 프롭스로 내려줄 때에는 forwardRef를 사용하자

부모컴포넌트

// parent.tsx

const navigation = useRef<HTMLDivElement>(null);
const [changeNavigationStyle,setChangeNavigationStyle] = useState(false)
//...

return(
<TopNavigation ref={navigation} {...changeNavigationStyle} />
  )
//...

자식 컴포넌트

// child.tsx
const TopNavigation = forwardRef<HTMLDivElement>((changeNavigationStyle,navigation) => {
//  ...
  
 return(
   <MainNavigation ref={navigation} style={changeNavigationStyle ? some : theother} >
//   ...
     )
     })
// ...

자식컴포넌트에서 forwardRef를 사용하여 묶어준다.